@import '../prefix';

.#{$prefix}--header--website {
  z-index: 9999;
  background-color: $ui-05;
  border-bottom: 1px solid $inverse-02;
}

.#{$prefix}--header__action {
  transition: $transition--base;
}

.#{$prefix}--header__action--active {
  border-color: transparent;
  background: transparent;
}

.#{$prefix}--header__action--active:hover {
  background-color: #333;
}

.#{$prefix}--header__menu-trigger svg {
  margin-top: 2px;
}

a.#{$prefix}--header__name {
  @include carbon--type-style('body-short-02');
  font-weight: 600;
  padding-left: $spacing-03;

  @include carbon--breakpoint('lg') {
    padding-left: $spacing-05;
  }
}

.#{$prefix}--header__name--prefix {
  @include carbon--type-style('heading-02');
  font-weight: 400;
}

.#{$prefix}--header__action--menu {
  border-width: 2px;
  display: block;

  @include carbon--breakpoint('lg') {
    display: none;
  }
}

a.#{$prefix}--header__name:focus {
  box-shadow: inset 0 0 0 2px $focus;
}

.#{$prefix}--header__menu-trigger {
  @include carbon--breakpoint('lg') {
    display: none;
  }
}

.#{$prefix}--header .#{$prefix}--header__name {
  font-weight: 400;
}

.#{$prefix}--header .#{$prefix}--header__name span {
  font-weight: 600;
}

.bx--header__menu-trigger {
  @include carbon--breakpoint('lg') {
    display: none;
  }
}

.bx--header .bx--header__name {
  font-weight: 400;
  white-space: nowrap;
}

.bx--header .bx--header__name span {
  font-weight: 600;
}