// ------------------------------------\
// HEADER
// ------------------------------------/

// SR/Tab shortcuts
.a-jumpnav {
  background: $white;
}

// Header 

.a-header {
  height: $spacer * 8;
  padding-top: $spacer * 2;
  margin-bottom: $spacer;

  @include media-breakpoint-up( md ) {
    height: $spacer * 9;
    padding-top: $spacer * 3;
  }

  @include media-breakpoint-up( lg ) {
    margin-bottom: $spacer * 3;
  }

  &.a-compact {
    height: $spacer * 6;

    @include media-breakpoint-up( md ) {
      height: $spacer * 9;
    }
  }

  >.container {
    @include media-breakpoint-down( md ) {
      padding: 0 $spacer;
    }
  }

  .a-logo {
    float: left;
    max-width: 110px;
    margin-top: -2px;
    margin-right: $spacer * 4;

    @include media-breakpoint-up( lg ) {
      max-width: 142px;
      margin-top: 0;
    }
  }

  .a-dropdown-languages,
  .a-dropdown-personswitchList {
    position: absolute;
    top: 57px !important;
    left: auto !important;
    width: 320px;

    @include media-breakpoint-up( sm ) {
      width: 420px;
    }
  }

  .a-dropdown-languages {
    right: -90px;
    padding: 0;

    @include media-breakpoint-up( sm ) {
      top: 55px;
      right: -38px;
    }
    @include media-breakpoint-up( md ) {
      right: -20px;
    }

    @include media-breakpoint-up( lg ) {
      right: -24px;
    }

    @include media-breakpoint-up( xl ) {
      right: -13px;
    }

    &.a-dropdownTriangle {
      &::after {
        right: 79px;
        left: auto;

        @include media-breakpoint-up( md ) {
          right: 8px;
        }
        @include media-breakpoint-up( lg ) {
          right: 12px;
        }
      }
    }
  }

  .a-dropdown-personswitchList {
    right: 0 !important;
    width: 100%;
    @include media-breakpoint-up( sm ) {
      top: 55px;

    }
    @include media-breakpoint-up( md ) {
      top: 55px !important;
      right: -3px !important;
      width: 420px;
    }

    &.a-dropdownTriangle {
      &::after {
        right: 1px;
        left: auto;

        @include media-breakpoint-up( md ) {
          right: 3px;
        }
      }
    }
  }
}

// Header options
.a-header-options {
  float: right;
  margin-top: -10px;

  @include media-breakpoint-up( md ) {
    left: auto;
    margin-top: -7px;
  }

  @include media-breakpoint-up( lg ) {
    margin-top: -6px;
  }

  .nav-link {
    padding: $spacer 8px 10px 8px;
    border-radius: 0;

    @include media-breakpoint-up( sm ) {
      padding: 13px 8px 10px 8px;
    }

    @include media-breakpoint-up( md ) {
      padding: 10px 8px 10px 8px;
    }

    @include media-breakpoint-up( lg ) {
      padding: 10px;
    }

    &:focus,
    &:active {
      color: $blue-dark;
      border-color: $blue-dark;
    }
  }

  // Language switcher (Button)
  .a-languageSwitcher {
    @extend .a-fontSizeXXS;
    @include a-fontMedium;
    position: absolute;
    right: 18px;
    color: $blue-dark;
    cursor: pointer;
    background: transparent;
    border: none;

    @include media-breakpoint-up( sm ) {
      position: relative;
      right: 0;
    }
    @include media-breakpoint-up( md ) {
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 0;
      margin-top: 1px;
      margin-right: $spacer;
      border-bottom: 1px solid $blue-dark;
    }

    @include media-breakpoint-up( xl ) {
      margin-right: $spacer * 2;
    }

    &:focus {
      &::before {
        position: absolute;
        top: -7px;
        left: -18px;
        width: calc(100% + 36px);
        height: calc(100% + 24px);
        content: ' ';
        background: $black-opacity-01;
        border: none;
        border-radius: 50px;
      }
    }

    &:hover,
    &:focus,
    &:active {
      border-bottom: 1px solid $blue-dark;
    }

    &:focus,
    &:active {
      outline: none;
    }

    i {
      @include a-fontSize30;
      vertical-align: middle;
    }

    &::after {
      display: none;

      @include media-breakpoint-up( md ) {
        display: inline-block;
        margin-left: 0;
        vertical-align: 0.095em;
      }
    }
  }

  .a-personSwitcher {
    padding-right: $spacer;

    @include media-breakpoint-up( sm ) {
      padding-right: $spacer;
      margin-right: -$spacer;
    }

    @include media-breakpoint-up( md ) {
      padding-left: $spacer;
    }

    @include media-breakpoint-up( lg ) {
      padding-left: $spacer * 2;
    }
  }
}

// Person switcher (Button)
.a-personSwitcher {
  @extend .a-fontSizeXXS;
  @include a-fontMedium;
  position: absolute;
  right: 0;
  margin-top: -7px;
  color: $blue-dark;
  text-align: right;
  cursor: pointer;
  background: transparent;
  border: none;

  @include media-breakpoint-up( sm ) {
    position: relative;
    right: 0;
  }

  &::after {
    display: none;
  }

  &:focus {
    background: $black-opacity-01;
    border-color: $blue-darker;
    border-radius: 50px;
  }

  &:focus,
  &:active {
    outline: none;
  }

  &:hover,
  &:focus,
  &:active {
    color: $blue-dark;
    border: none;
  }

  &.search-header {
    color: $white;

    &:hover,
    &:focus,
    &:active {
      color: $white !important;
    }

    .a-personSwitcher-icon {
      color: $white;
    }
  }

  &.subheader-dark {
    color: $black;

    &:hover,
    &:focus,
    &:active {
      color: $black !important;
    }

    .a-personSwitcher-icon {
      color: $black;
    }
  }

  .a-personSwitcher-name {
    display: none;
    max-width: 90px;
    overflow: hidden !important;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;

    @include media-breakpoint-up( sm ) {
      display: inline-block;
    }
    @include media-breakpoint-up( lg ) {
      max-width: 120px;
    }
    @include media-breakpoint-up( xl ) {
      max-width: 220px;
    }

    span {
      overflow: hidden !important;
      line-height: 1.6;
      text-overflow: ellipsis;
    }
  }

  .a-personSwitcher-icon {
    display: inline-flex;
    height: 36px;
    margin-left: 3px;
    line-height: 1;
    color: $blue-dark;

    @include media-breakpoint-up( md ) {
      margin-top: 0;
    }

    &::before {
      align-self: center;
    }
  }
}

// Language and personSwitch list (dropdown)
.a-dropdown-languages,
.a-dropdown-personswitchList {
  position: relative;
  width: 320px;
  padding: 0;
  color: $black;
  border-radius: 0;
  transform: none !important;
  will-change: unset !important;

  @include media-breakpoint-up( sm ) {
    width: 420px;
  }

  .dropdown-item {
    display: flex;
    padding: $spacer * 1.5 $spacer * 2;
    white-space: normal;
    border-bottom: none;
    align-items: flex-start;
    -webkit-box-align: start;

    &:hover {
      color: $black;
    }

    .a-flag {
      float: left;
      max-width: 48px;
      max-height: 29px;
      margin-top: 5px;
      margin-right: 12px;

      &.a-globe {
        margin-top: 2px;
      }
    }

    p {
      @extend .a-fontSizeXXS;
      margin-bottom: 0;
      word-wrap: break-word;
    }
  }

  // Log out
  .a-link-logout {
    position: absolute;
    top: $spacer * 2;
    right: $spacer * 3;
    padding-bottom: 0;
    // TODO: Disable linting for special case line heights
    line-height: 19px;
  }
}

.a-dropdown-fullWidth {
  width: 100% !important;
  margin-bottom: $spacer * 5;
  transition: width 0.35s ease;

  .a-btn-shadow {
    min-height: $spacer * 7;

    &.a-btn-shadow-expand {
      min-height: $spacer * 5;
    }

    &.a-btn-shadow-large {
      .a-btn-icon-text-second {
        display: inline-block;
      }
    }
  }
}

.a-dropdown-personswitchList {

  .a-dropdown-footer {
    display: none;
  }

  &.a-dropdown-fullWidth {
    .a-dropdown-footer {
      display: block;
    }
  }

  .a-btn-action {
    &.a-fullWidthBtn  {
      span {
        margin-left: 0;
      }

      i {
        margin-left: $spacer;
      }
    }
  }

  // On large version
  &.a-dropdown-personswitchList-large {
    &.a-dropdownTriangle {
      &::after {
        right: 15px;
        left: auto;
      }
    }
  }
}


// When switcher panel is open
.nav-pills {
  .nav-item {
    &.show {
      .nav-link {
        &.a-languageSwitcher,
        &.a-personSwitcher {
          color: $blue-dark;
          text-align: right;
          background: transparent;
        }
      }
    }
  }
}

// Hide .dropdown-menu (Language and personswitcher)
// ONLY when inside a collapse-btn (.dropdown)
.dropdown-menu {
  display: block;
}

.dropdown {
  .dropdown-menu {
    display: none;
  }
}

.show>.dropdown-menu {
  display: block;
}

// LOGO
.a-logo {
  height: $spacer * 2;
  margin-bottom: 0;
}

// GLOBAL NAVIGATION (in header)
.a-globalNav {
  .a-globalNav-logo {
    position: relative;
    z-index: 1;
    display: block;
    float: left;
    border: none;

    &:focus {
      border: none;
      box-shadow: none !important;
    }

    &::before {
      position: absolute;
      top: -10px;
      left: -11%;
      z-index: -1;
      width: 124%;
      height: $spacer * 4;
      cursor: pointer;
      content: '';
    }
  }

  .navbar-toggler {
    @extend .a-fontSizeXS;
    @include a-fontMedium;
    position: absolute;
    right: 60px;
    float: right;
    width: $spacer * 5;
    padding: 3px 0;
    margin-top: -5px;
    color: $blue-dark;
    cursor: pointer;
    border: 3px solid $blue-dark;

    @include media-breakpoint-up( sm ) {
      right: 160px;
    }

    @media (max-width: 767px) {
      .ai-circle-exclamation {
        float: right;
        line-height: 1;
      }
    }

    @media (max-width: 767px) {
      width: 75px;
    }

    &::after {
      content: 'meny';
     }

    &[data-jsexpanded='true'] {
      color: $white;
      background: $blue-dark;
      @media (max-width: 767px) {
        .ai-circle-exclamation {
          display: none;
          line-height: 0;
        }
      }

      &::after {
        content: 'lukk';
      }
    }
  }

  .dropdown {
    .dropdown-menu {
      display: block;
    }
  }

  .navbar-toggleable-sm {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: visible;

    @include media-breakpoint-up( md ) {
      position: relative;
    }
  }
}

.a-globalNav-main {
  position: absolute;
  left: 0;
  z-index: 1001;
  min-height: 100%;
  margin-top: $spacer * 5;
  overflow: auto;
  background: $white;

  @include media-breakpoint-up( md ) {
    position: relative;
    z-index: auto;
    display: block !important;
    min-height: auto;
    margin-top: 2px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
	}

  @include media-breakpoint-up( lg ) {
    margin-top: -2px;
	}

  .a-dropdownTriangle {
    box-shadow: none;

    &::after {
      display: none;
    }
  }

  .indicator {
    @include a-fontSize10;
    display: inline-block;
    padding-top: 3px;
    margin-left: $spacer;
    vertical-align: middle;
    transition: all 0.25s ease-in-out;

    &.flip {
      vertical-align: middle;
      transform: rotate( -180deg );
		}
	}

  ul {
    float: left;
    list-style: none;

    @include media-breakpoint-up( lg ) {
      margin-top: -3px;
    }
	}

  li {
    float: left;
    width: 100%;
    padding: 0 $spacer * 2;

    &:last-child > a {
      border-bottom: none;
    }

    @include media-breakpoint-up( md ) {
      width: auto;
      padding: 0;
      margin-left: $spacer * 2;

      &:first-child {
        margin-left: $spacer;
			}
		}

    @include media-breakpoint-up( lg ) {
      margin-left: $spacer * 3;

      &:first-child {
        margin-left: $spacer * 3;
			}
		}

    @include media-breakpoint-up( xl ) {
      margin-left: $spacer * 3;

      &:first-child {
        margin-left: $spacer * 4;
			}
		}

    a {
      @include a-fontSize18;
      @include a-fontMedium;
      display: block;
      padding: $spacer $spacer;
      color: $blue-dark;
      text-transform: lowercase;
      border: none;
      border-bottom: 1px solid $blue-dark;

      &:hover,
      &:focus,
      &:active {
        color: $blue;
			}

      &.globalNav-active {
        color: $black;

        &::before {
          position: absolute;
          right: 50%;
          bottom: 0;
          left: 50%;
          z-index: -1;
          height: 3px;
          content: '';
          background: $blue-dark;
			  }
			}

      @include media-breakpoint-up( md ) {
        display: inline;
        padding: 0;
        padding-bottom: 3px;
        border-bottom: none;

        &:hover,
        &:active,
        &:focus {
          color: $blue-dark;
        }

        &.globalNav-active {
          span {
            padding-bottom: 3px;
            color: $blue-dark;
            border-bottom: 3px solid $blue-dark;
          }
        }
      }

      @include media-breakpoint-up( lg ) {
        @include a-fontSize24;
        padding-bottom: 3px;
			}
		}

    .a-link-tel {
      @include a-fontBold;
      padding-top: $spacer * 2;
      padding-bottom: $spacer * 2;
      margin-left: -5px;
		}
  }

  .dropdown-menu {
    position: static;
    box-sizing: content-box;
    width: inherit;
    margin: 0;
    color: $black;
    border: none;
    border-radius: 0;

    &.a-dropdown-languages {
      display: none;
      min-width: 0;
      overflow: hidden;
      transition: height 0.25s ease-in-out;

      &.expand {
        display: block;
        width: inherit;
        min-width: 160px;
        border-bottom: 1px solid $blue-dark;
			}
		}

    @include media-breakpoint-up( md ) {
      &.a-dropdown-languages {
        display: none;
			}
		}

    .dropdown-item {
      display: inline-block;
      border: none;

      img {
        margin: 0;
        margin-right: $spacer * 2;
			}

      &:last-of-type {
        img {
          margin-top: -$spacer * 0.5;
          margin-bottom: -$spacer * 0.5;
				}
			}

      p {
        // TODO: Disable linting for special case line heights
        line-height: $spacer * 3;
			}

      // sass-lint:disable-block force-pseudo-nesting
      // TODO: Fix. Unsure how to rewrite this in a good way
      span:last-of-type,
      p>br {
        display: none;
			}
		}
	}

  .a-form-group {
    margin-bottom: $spacer * 3;
  }
}

// Different color versions of header
.a-darkBackground {
  @include media-breakpoint-up( md ) {
    .a-globalNav-main {
      li {
        a {
          color: $white;
        }
      }
    }
  }

  .a-header-options {
    .a-languageSwitcher,
    .a-personSwitcher {
      color: $white;
      border-color: $white;
    }

    .a-languageSwitcher {
      &:focus {
        &::before {
          background: $white-opacity-02;
        }
      }
    }

    .a-personSwitcher {
      &:focus {
        background: $white-opacity-02;
      }
    }
  }

  .navbar-toggler {
    color: $white;
    border-color: $white;

    &[data-jsexpanded='true'] {
      color: $blue-dark;
      background: $white;
    }
  }

  .a-hvr-underline {
    &:hover {
      @include media-breakpoint-up( md ) {
        border-color: $white;
      }
    }
  }

  .a-personSwitcher-icon {
    height: $spacer * 3;
    color: $white;
  }

  .nav-pills {
    .nav-item {
      &.show {
        .nav-link {
          &.a-languageSwitcher,
          &.a-personSwitcher {
            color: $white;
          }
        }
      }
    }
  }
}

.a-bgBlueLight {
  .a-header {
    .a-header-options {
      .a-languageSwitcher {
        &:focus {
          &::before {
            background: $white-opacity-03;
          }
        }
      }

      .a-personSwitcher {
        &:focus {
          background: $white-opacity-03;
        }
      }
    }
  }
}

// When login (Velg aktør): hide topNav, and adjust personswitch
.a-login {
  &.a-hide-menu {
    .a-globalNav-main,
    .a-languageSwitcher,
    .a-personSwitcher-name,
    .a-containerFooter,
    .navbar-toggler {
      display: none;
    }
  }

  .a-personSwitcher {
    cursor: not-allowed;
  }

  .a-login-container {
    padding-top: $spacer * 5;
    margin-top: -25px;

    @include media-breakpoint-up( lg ) {
      margin-top: -42px;
    }

    .a-triangleShadow {
      position: relative;

      &::after {
        top: -60px;
        right: 2px;
        left: auto;

        @include media-breakpoint-up( sm ) {
          right: 1px;
        }

        @include media-breakpoint-up( lg ) {
          right: 13px;
        }

        @include media-breakpoint-up( xl ) {
          right: -11px;
        }
      }
    }
  }

  h1 {
    margin-bottom: $spacer * 2;

    @include media-breakpoint-up( lg ) {
      margin-bottom: 0;
    }

    .a-helpIconButton {
      @include a-fontSize16;
      vertical-align: middle;
    }
  }

  .a-link-logout {
    position: absolute;
    top: -36px;
    right: 37px;
    padding-bottom: 0;
    line-height: 19px;

    @include media-breakpoint-up( xs ) {
      right: $spacer * 1;
    }

    @include media-breakpoint-up( sm ) {
      right: $spacer * 2;
    }

    @include media-breakpoint-up( lg ) {
      top: 4px;
      right: $spacer * 4;
    }

    @include media-breakpoint-up( xl ) {
      top: 4px;
      right: $spacer * 3;
    }
  }

  .a-btn-shadow {
    //sass-lint:disable no-duplicate-properties no-important
    height: auto !important;
    height: $spacer * 7;
    min-height: $spacer * 7;

    &.a-btn-shadow-expand {
      height: $spacer * 5;
      min-height: $spacer * 5;
    }

    &.a-btn-shadow-large {
      .a-btn-icon-text-second {
        display: inline-block;
      }
    }
  }
}