@import "./global.css";

.modal_container {
  backdrop-filter: blur(1rem);
  background-color: var(--theme-modal-bg);
  inset: 0;
  position: fixed;
  overflow: hidden;
  z-index: 99;

  .modal_wrapper {
    height: 100%;
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .modal_content_container {
      height: 100%;

      .modal_content_wrapper {
        background-color: var(--theme-white);
        border-radius: 1.25rem;
        display: flex;
        flex-direction: column;
        height: fit-content;
        max-height: 100%;
        overflow: hidden;
        padding: 1.875rem;
        row-gap: 1.875rem;

        .modal_content_title {
          align-items: center;
          display: flex;
          justify-content: space-between;

          h4 {
            color: var(--theme-button);
            font-weight: 600;
          }

          button {
            cursor: pointer;
          }
        }

        .modal_content_description {
          flex: 1;
          overflow: auto;

          .highlight {
            color: var(--theme-black);
            font-size: 1.6rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            line-height: 2.2rem;
          }

          p {
            color: var(--theme-secondary-text);
            font-weight: 500;

            a {
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1280px) {
  .modal_container {
    .modal_wrapper {
      .modal_content_container {
        .modal_content_wrapper {
          .modal_content_title {
            h4 {
            }

            button {
            }
          }

          .modal_content_description {
            .highlight {
              font-size: 1.125rem;
            }

            p {
            }
          }
        }
      }
    }
  }
}