@import "../settings.colors";
@import "../settings.fonts";

@import "tools.functions";
@import "tools.mixins";
@import "base.controls";

// Media query mixins

@mixin c-site-header-large-buttons {
  .c-site-header {
    .c-site-header__hamburger,
    .c-site-header__button-group {
      .c-button {
        @include control-button--regular;
        @include control-button--regular-icon;
      }
      .c-button--icon-only {
        @include control-button--icon-only;
      }
    }
    .c-site-header__button-group {
      .c-button--adchoices {
        padding-left: rem(20);
        padding-right: rem(20);
      }
    }
  }
  // Overrides some of the above
  @include c-site-header-reveal-adchoices-text;
}

@mixin c-site-header-reveal-adchoices-text {
  .c-site-header {
    .c-site-header__button-group {
      // Font size should remain small for this particular button
      .c-button--adchoices {
        font-family: $font-sans-stack;
        font-size: rem(10);
        color: $color-white;
        text-transform: none;
        .c-button__icon {
          margin-right: rem(4);
        }
        .c-button__text {
          @include visually-hidden-undo;
        }
      }
    }
  }
}

// Utility mixins

@mixin c-site-header-max-width($max-width) {
  .c-site-header__top-content,
  .c-site-header__bottom-content,
  .c-site-header__menu-panel {
    max-width: $max-width;
  }
  @media (min-width: $max-width) {
    .c-menu-panel__close-button--first {
      left: calc((50% - #{$max-width} / 2) + #{$max-width} - #{rem(44)} - #{rem(20)});
    }
  }
}

@mixin c-site-header-truncated-button-max-width($max-width) {
  .c-site-header__button-group {
    .c-button--truncated {
      @include control-button--truncated($max-width);
    }
  }
}

// The following mixins should be applied to the ".c-site-header" element

@mixin c-site-header-placeholder-height($height) {
  + .c-site-header__placeholder {
    height: $height;
  }
}

@mixin c-site-header-menu-panel-offset($offset) {
  ~ .c-site-header__menu-panel {
    height: calc(100% - #{$offset});
    top: $offset;
  }
}

@mixin c-site-header-menu-panel-overlaps-scroll-menu($overlaps) {
  @if $overlaps {
    // Swap z-indexes to make menu panel overlap site header. Normally, the
    // header overlaps the panel because the logo hangs down over the edge
    z-index: $z-index-site-header-sticky - 1;
    ~ .c-site-header__menu-panel {
      z-index: $z-index-site-header-menu-panel + 1;
    }
    &.c-site-header--menu-panel-open .c-scroll-menu {
      display: none;
    }
  } @else {
    z-index: $z-index-site-header-sticky;
    ~ .c-site-header__menu-panel {
      z-index: $z-index-site-header-menu-panel;
    }
    &.c-site-header--menu-panel-open .c-scroll-menu {
      display: block;
    }
  }
}
