@import '../shared-styles/index';

$header-height: 64px;
$header-link-border-width: nx-border-size(xl);

:host {
  @include type-style(header);
}

// this fixes vertical alignment of the .nx-header__row on IE11
:host(.nx-header:not(.nx-header--single-row)) {
  display: flex;
  flex-direction: column;
}

:host(.nx-header.nx-header--single-row),
::ng-deep .nx-header__row {
  display: flex;
  align-items: center;
  padding: nx-border-size(xs) nx-spacer(2m) 0 nx-spacer(2m);
  border-bottom: nx-border-size(xs) solid v(header-border-color);
  height: $header-height;
  justify-content: space-between;
  background: v(header-background-color);

  @media screen and (forced-colors: active) {
    background-color: Canvas;
  }

  @media screen and (max-width: 703px) {
    padding: nx-border-size(xs) nx-spacer(s) 0 nx-spacer(s);
  }
}

::ng-deep .nx-header__link {
  border-bottom: nx-border-size(xl) solid transparent;
  padding-top: $header-link-border-width;
  text-decoration: none;
  display: block;
  margin-right: nx-spacer(2m);
  white-space: nowrap;

  :host-context([dir='rtl']) & {
    margin-right: initial;
    margin-left: nx-spacer(2m);
  }

  &::after {
    display: block;
    content: attr(text-content);
    font-weight: v(header-link-active-font-weight);
    height: 1px;
    overflow: hidden;
    visibility: hidden;
  }

  &.is-active {
    color: v(header-link-active-color);
    border-color: currentColor;

    .nx-header__link-title {
      font-weight: v(header-link-active-font-weight);
    }
  }

  &:hover,
  &:active {
    color: v(header-link-active-color);
    border-color: v(header-link-active-color);
  }

  @media screen and (forced-colors: active) {
    color: LinkText !important;
  }
}

@media screen and (forced-colors: active) {
  ::ng-deep .nx-header__link {
    border-bottom: none;

    &.is-active {
      border-bottom: 4px solid;
    }
  }
}

::ng-deep .nx-header__link-title {
  line-height: 0;
}

::ng-deep .nx-header__brand {
  margin-right: nx-spacer(2m);
  display: flex;
  align-items: stretch;

  :host-context([dir='rtl']) & {
    margin-right: initial;
    margin-left: nx-spacer(2m);
  }
}

::ng-deep .nx-header__actions {
  display: flex;
  align-items: center;
  margin-left: nx-spacer(m);

  &.nx-header__actions--show-separator {
    padding-left: nx-spacer(s);
    border-left-width: nx-border-size(xs);
    border-left-style: solid;
    border-left-color: v(header-border-color);
  }

  :host-context([dir='rtl']) & {
    margin-right: nx-spacer(m);
    margin-left: initial;

    &.nx-header__actions--show-separator {
      padding-right: nx-spacer(s);
      padding-left: initial;
      border-right-width: nx-border-size(xs);
      border-right-style: solid;
      border-right-color: v(header-border-color);
      border-left: none;
    }
  }
}

::ng-deep .nx-header__link.cdk-keyboard-focused {
  @include focus-style;
  border-radius: nx-border-radius(s);
}

:host ::ng-deep a:focus {
  outline: none;
}

::ng-deep .nx-header__app-title {
  display: flex;

  font-size: nx-font-size(3xs);
  font-weight: bold;
  align-items: center;
  padding-left: nx-spacer(s);
  margin-left: nx-spacer(s);
  white-space: nowrap;

  border-left-width: nx-border-size(xs);
  border-left-style: solid;
  border-left-color: v(header-border-color);

  :host-context([dir='rtl']) & {
    padding-right: nx-spacer(s);
    padding-left: initial;
    margin-right: nx-spacer(s);
    margin-left: initial;
    border-right-width: nx-border-size(xs);
    border-right-style: solid;
    border-right-color: v(header-border-color);
    border-left: none;
  }
}
