/* ==================================
   #HEADER
   ================================== */

/* Variables
   ========================================================================== */

$au-main-header-bg: var(--au-white) !default;
$au-main-header-border: var(--au-gray-300) !default;
$au-main-header-color: var(--au-gray-900) !default;
$au-main-header-color-underline: var(--au-gray-300) !default;
$au-main-header-hover-color: var(--au-gray-700) !default;
$au-main-header-hover-color-underline: var(--au-gray-200) !default;
$au-main-header-active-color: var(--au-blue-900) !default;
$au-main-header-divider-rotation: -19deg !default;

/* Component
   ========================================================================== */

.au-c-main-header {
  position: relative;
  z-index: var(--au-z-index-beta);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: $au-main-header-bg;
  box-shadow:
    0 1px 3px rgba($au-gray-900, 0.1),
    0 4px 20px rgba($au-gray-900, 0.035),
    0 1px 1px rgba($au-gray-900, 0.025);
}

.au-c-main-header__title-group {
  display: flex;
  align-items: center;
  color: $au-main-header-color;
  text-decoration: none;
}

.au-c-main-header__title {
  @include au-font-size(var(--au-base), 1);
  font-weight: var(--au-medium);
  text-transform: uppercase;
  position: relative;
  display: block;
  padding: $au-unit-tiny;
  color: $au-main-header-color;
  transition:
    color var(--au-transition),
    text-decoration-color var(--au-transition);
  letter-spacing: 0.03ex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: $au-unit-huge;

  @include mq(xsmall) {
    max-width: $au-unit-huge * 1.5;
  }

  @include mq(small) {
    margin-left: 0;
    padding-left: $au-unit;
    max-width: $au-unit-huge * 2;

    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0.5rem;
      transform: rotate($au-main-header-divider-rotation);
      width: 0.1rem;
      height: 3rem;
      background-color: $au-main-header-border;
    }
  }

  @include mq(medium) {
    max-width: initial;
  }
}

.au-c-main-header__title--link {
  text-decoration: underline;
  text-underline-offset: 0.3ex;

  &,
  &:visited {
    color: $au-main-header-color;
    text-decoration-color: $au-main-header-color-underline;
  }

  &:hover,
  &:focus {
    color: $au-main-header-hover-color;
    text-decoration: underline;
    text-decoration-color: $au-main-header-hover-color-underline;
  }

  &:focus {
    outline: var(--au-outline);
  }
}

.au-c-main-header__skiplink {
  @include au-font-size(var(--au-base), 1);
  font-weight: var(--au-regular);
  position: absolute;
  transition: color var(--au-transition);
  letter-spacing: 0.03ex;
  margin-left: $au-unit-small;
  padding: $au-unit-tiny;
  background-color: var(--au-gray-100);
  border-radius: var(--au-radius);
  z-index: var(--au-z-index-alpha);
  top: -1000px;
  left: -1000px;

  &,
  &:hover,
  &:focus {
    color: var(--au-gray-900);
    text-decoration: underline;
    text-decoration-color: var(--au-gray-300);
  }

  &:focus {
    outline: var(--au-outline);
    top: $au-unit-large;
    left: -$au-unit-tiny;
  }

  @include mq(medium) {
    position: relative;

    &:focus {
      top: 0;
      left: 0;
    }
  }
}

.au-c-main-header__actions {
  @include au-font-size(var(--au-base), 0.7);
  display: flex;
  align-items: center;
  padding: $au-unit-tiny $au-unit-small;
}