// ============================================================================
// :: Header
// ============================================================================
/**
 * This component is used to represent the main header of the page.
 * This maily includes a title, language picker, back button, ...
 */

// ============================================================================
// :: Root
// ============================================================================
.o-header {
  position: relative;
  z-index: $z-index-atmosphere;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: $header-height-mobile;
  overflow: hidden;

  /**
   * Added padding because internet exploder can't center the container with
   * flexbox when min-height is used
   */
  padding: 1.4rem 0;

  background-color: $primary-color-base;

  @include respond-at($breakpoint-tablet-default) {
    min-height: $header-height-desktop;
    /**
     * Added padding because internet exploder can't center the container with
     * flexbox when min-height is used
     */
    padding: 1.8rem 0;
  }
}

html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .o-header {
    min-height: 14rem;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.o-header__container {
  position: relative;
  z-index: $z-index-floor;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.o-header__container--no-title {
  justify-content: flex-end;
}

.o-header__title {
  @extend %__h2-default;

  color: $text-color-white;

  word-break: break-word;
}

.o-header__subtitle {
  margin-top: 1rem;

  color: $text-color-medium;
  font-size: $font-size-1x-small;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-base;
  }
}

.o-header__right-actions,
.o-header__left-actions {
  display: flex;
  align-items: center;
}

.o-header__left-actions {
  justify-content: flex-start;
  margin-right: 1rem;
}

.o-header__right-actions {
  justify-content: flex-end;
  gap: 6rem;
  margin-left: 1rem;

  @include respond-to($breakpoint-tablet-default) {
    gap: 2rem;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.o-header--detail,
.o-header--overlay {
  padding: 2rem 0;

  background-color: transparent;

  .o-header__content {
    flex-grow: 1;

    @include respond-to($breakpoint-tablet-default) {
      text-align: center;
    }
  }

  .o-header__title {
    color: $text-color-base;

    word-break: break-word;
  }
}

.o-header--detail {
  padding: 1rem 0 1.5rem;

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

  .o-header__title {
    @include respond-to($breakpoint-tablet-default) {
      font-size: $font-size-3x-large;
    }

    word-break: break-word;
  }

  .o-header__content {
    @include respond-at($breakpoint-tablet-default) {
      padding-left: 4rem;
    }
  }
}

.o-header--overlay {
  text-align: center;

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

  .o-header__title {
    padding-left: 0;

    font-size: $font-size-3x-large;

    word-break: break-word;
  }
}

.o-header--theme-white {
  background-color: transparent;

  .o-header__title {
    color: $text-color-white;

    word-break: break-word;
  }
}

.o-header__title--center {
  text-align: center;
}

.o-header--with-border {
  .o-header__container {
    @include respond-at($breakpoint-tablet-default) {
      padding-bottom: 3.5rem;

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

// Large Text: stack header container on mobile
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .o-header__container {
    @include respond-to($breakpoint-tablet-default) {
      flex-direction: column;
    }
  }
}