@use '../core' as *;

.#{$prefix}-header-global {
  padding-top: $spacing-sm;
  padding-bottom: $spacing-sm;
  position: relative;
  background-color: $color-white-base;

  &__inner {
    display: flex;
    position: relative;
  }

  &__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
    flex-shrink: 0;
  }

  &__controls .#{$prefix}-global-toggle {
    margin-left: $spacing-xs;
  }

  &__controls .#{$prefix}-global-toggle:hover,
  &__controls .#{$prefix}-global-toggle[aria-expanded=false] {
    background-color: $color-black-100;
    border: none;
    color: $color-black-500;
  }

  &__controls .#{$prefix}-global-toggle[aria-expanded=true] {
    background-color: $color-blue-500;
    border-color: $color-blue-500;
    color: $color-white-base;
  }

  &__controls .#{$prefix}-global-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 .125rem $color-white-base, 0 0 0 $spacing-xxs $color-blue-400;
  }

  &__search,
  &__id-menu {
    left: -3 * $spacing-sm;
    margin: 0 $spacing-md;
    position: absolute;

    // Magic number here to get the menus to line up with bottom of global header
    top: 3 * $spacing-sm;
    background-color: $color-black-000;
    border-top: 1px solid $color-black-100;
    padding: $spacing-sm $spacing-md;
    z-index: $z-index-100;
    width: calc(100% + 3rem);
  }

  &__search input[type] {
    background-color: $color-white-base;
  }

  &__logo-slot {
    // Give the toggle buttons some space on mobile. Makes lockup body text wrap
    width: calc(100% - 5rem);
    flex-shrink: 1;
  }
}

@include mq($breakpoint-md) {
  .#{$prefix}-header-global__search {
    top: 3.65 * $spacing-sm;
  }
}

@include mq($breakpoint-lg) {
  .#{$prefix}-header-global {
    &__controls .#{$prefix}-global-toggle {
      margin-left: $spacing-sm;
    }

    &__id-menu {
      background-color: $color-white-base;
    }

    &__search {
      margin-right: 0;
      top: 3.75 * $spacing-sm;
      width: $width-lg;
      right: $spacing-xxs;
      left: unset;
      background-color: $color-white-base;
      box-shadow: $shadow-heavy;
      border-radius: $spacing-xxs;
      position: absolute;
      padding: $spacing-sm $spacing-md;
    }
  }
}