// ============================================================================
// :: Settings
// ============================================================================

// ============================================================================
// :: Root
// ============================================================================
// .p-settings {}

// ============================================================================
// :: Elements
// ============================================================================
/**
 * This is done to make sure the tabs content fills up the remaining space
 * within the l-root__content container
 */
.p-settings__tabs {
  @extend %__block-base;

  @include respond-at($breakpoint-tablet-default) {
    padding: 3.5rem;
  }

  .l-form__fieldset-title {
    padding-bottom: 1.5rem;
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    text-transform: uppercase;

    color: $text-color-medium;

    border-bottom: $border-width-base solid $border-color-1x-light;
  }
}

.p-settings--account .p-settings__tabs .l-grid--with-margins>.m-summary--contained {
  display: flex;

  .m-summary__container {
    width: 100%;
    height: 100%;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.p-settings--info {

  /**
   * Move the submit-part of the l-form layout to the bottom
   */
  .o-tabs__content,
  .l-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .l-form {
    flex-grow: 1;
    justify-content: space-between;
  }
}

// Hide progress indicator specifically on the accessibility settings page
.p-settings--accessibility {
  .a-progress {
    display: none;
  }
}

// Limit tabs content to max 2 columns when text zoom is large
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .p-settings__tabs {
    [class*="l-grid__col"] {
      // Mobile/tablet: full width
      width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

      @include respond-at($breakpoint-tablet-default) {
        width: calc(#{$_grid-col-12} - #{$grid-spacing-tablet-default});
      }

      // Desktop: 6/12 → at most two columns per row
      @include respond-at($breakpoint-desktop-default) {
        width: calc(#{$_grid-col-6} - #{$grid-spacing-desktop-default});
      }

      @include respond-at($breakpoint-desktop-large) {
        width: calc(#{$_grid-col-6} - #{$grid-spacing-desktop-large});
      }
    }
  }
}