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

@import "tools.functions";
@import "tools.mixins";
@import "components.button";

// Media query mixins

@mixin c-site-header-large-buttons {
  .c-site-header__hamburger,
  .c-site-header__button {
    > .c-button {
      @include c-button--regular;
      @include c-button--regular-icon;
    }
    > .c-button--icon-only {
      @include c-button--icon-only;
    }
  }
  .c-site-header__button {
    > .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 {
  // Font size should remain small for this particular button
  .c-site-header__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 {
    max-width: $max-width;
  }
  // horizontally align the search button with the menu panel close button
  .c-site-header__menu-panel > .c-menu-panel {
    max-width: $max-width + rem(42);
  }
}

@mixin c-site-header-truncated-button-max-width($max-width) {
  .c-site-header__button {
    > .c-button--truncated {
      @include c-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--benefits--sm {
  .c-site-header__benefits {
    display: block;
  }
}
