@use '@scssutils' as *;

#settings-page {
  .page-content {
    box-sizing: border-box;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;

    @include media-breakpoint-up(lg) {
      padding: 64px 70px;
    }

    h1 {
      display: none;
      margin-bottom: var(--spacing-l);

      @include typography(app-title);

      color: var(--text-body-primary);

      @include media-breakpoint-up(lg) {
        display: block;
      }
    }

    h2 {
      @include typography(app-body-1);

      color: var(--text-body-primary);
    }

    h3 {
      @include typography(modal-title);

      color: var(--text-body-primary);
    }

    & > .loader-spinner {
      padding-top: 10vh;
      width: 100% !important;
    }

    .helper-row {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      .labeled-checkbox {
        padding-bottom: 0;
      }
    }

    section {
      & > header {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-s);

        h2 {
          display: flex;
          align-items: center;
          gap: var(--spacing-xs);
          @include typography(app-welcome-1);

          .helper-floating {
            @include typography(modal-title);
          }
        }

        & > .controls {
          display: flex;
          gap: var(--spacing-s);
        }
      }

      display: flex;
      flex-flow: column nowrap;
      gap: var(--spacing-m);
    }

    .license-not-required-container {
      padding-bottom: var(--spacing-s);
    }

    .card {
      & > .controls {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: flex-start;

        column-gap: var(--spacing-xs);

        & > .btn {
          &:first-of-type {
            margin-left: auto;
          }
        }
      }
    }

    & > .settings-card {
      padding: 0;
      @include media-breakpoint-up(lg) {
        padding: var(--spacing-m);
        border-top-left-radius: 0;
      }

      @include media-breakpoint-down(lg) {
        padding: var(--spacing-m) 0;
      }
      h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);

        @include typography(app-side-bar);

        .helper-floating {
          @include typography(modal-title);
        }
      }

      .subsection-header {
        margin-bottom: var(--spacing-s);
      }

      .subsection-header-with-controls {
        margin-bottom: var(--spacing-s);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .checkbox-column {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-s);
        padding-bottom: var(--spacing-s);
      }

      .column-layout {
        @include media-breakpoint-up(xxl) {
          display: grid;
          grid-template-rows: auto;
          grid-template-columns: 1fr 1fr;
          align-items: start;
          justify-items: start;
          row-gap: 48px;
          column-gap: 56px;
        }

        & > .left {
          grid-column: 1;
        }

        & > .right {
          grid-column: 2;
        }

        & > .left,
        & > .right {
          width: 100%;
          max-width: 800px;
          display: flex;
          flex-flow: column;
          row-gap: var(--spacing-s);
        }
      }

      .spinner-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        grid-column: 1 / -1;
        width: 100%;
      }
    }
  }

  .license-not-required-container {
    grid-column: 1 / -1;
    width: 100%;

    @include media-breakpoint-down(xxl) {
      margin-bottom: 26px;
    }

    @include media-breakpoint-down(xl) {
      margin-top: 26px;
    }
  }
}
