// Header variables ---------- //
// z-indexes - TODO refactor to a site-wide z-index management approach
$z-index-header:  7000;
$z-index-overlay: 8000;
$z-index-nav:     9000;

// Header ------------- //

.header {
  width: 100%;
  z-index: $z-index-header;

  .logo{
    //background-image is set by the themes in the "themes"-scss-files.
    background-image: url($image-path + '/logo-header-placeholder.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    height: 60px;
    width: 200px;
    max-width: 60%;
  }

  .button{
    width: 100%;
    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      width: auto;
    }
  }
  h1,h2,h3,h4,h5,h6,p{
    margin-top: 0;
    margin-bottom: 0;
  }
  @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
    .form-select, .form-input{
      margin-top: 0;
      margin-bottom: 0;
    }
    .form-select, .form-input{
      width: auto; //overwrite width 100%
    }
  }

  .button-menu-open {
    width: auto;
    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      display: none;
    }
  }
  .button-menu-close {
    width: unset;
    margin-left: auto;
    display: flex;
    align-items: center;
    margin-right: map-get($spacers, 4);
    .icon-svg{
      margin: 0 8px 0 0;
    }
    span{
      position: relative;
      top: 1px;
    }
    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      display: none;
    }
  }

  .portal-header{
    border-bottom: $inner-border;
    width: 100%;
    .portal-header-inner{
      width: 100%;
      padding-top: calc(#{map-get($spacers, 4)} - 1px);
      padding-bottom: calc(#{map-get($spacers, 4)} - 1px);
      display: flex;
      align-items: center;
      @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
        flex-direction: row;
      }
    }

    .portal-info{
      display: none;
      @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
        margin-left: auto;
        display: flex;
        align-items: center;

        & > *{
          margin-left: map-get($spacers, 4);
        }
      }
      .user{
        text-align: right;
        max-width: 500px;
      }
      .button{
        white-space: nowrap;
      }
    }
  }

  .solution-header{
    border-bottom: $outer-border;

    @include media-breakpoint-up(lg) {
      border-bottom: $inner-border;
    }

    width: 100%;
    &.header-end{
      border-bottom: $outer-border;
    }

    .solution-header-inner{
      display: flex;
      align-items: center;
      flex-direction: row;
      padding-top: calc(#{map-get($spacers, 4)} - 1px);
      padding-bottom: calc(#{map-get($spacers, 4)} - 1px);
    }

    .solution-heading{
      a, h1{
        font-size: 2.8rem;
        line-height: 3.2rem;
        font-weight: $font-weight-semibold;
        color: $color-black;
        text-decoration: none;
        display: inline-block;
        @include media-breakpoint-down(sm) {
          font-size: 2.2rem;
          line-height: 2.4rem;
        }
      }
    }
    .solution-info{
      display: none;
      @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
        margin-left: auto;
        text-align: right;
        max-width: 60%;
        display: block;
      }
    }
  }
  .authority-name{
    color: $color-gray-dark;
  }
  .button-contact{
    display: inline-flex;
    .icon-svg{
      position: relative;
      top: -1px;
    }
  }

  .portal-info-mobile{
    padding: map-get($spacers, 5) map-get($spacers, 4);
    border-bottom: $inner-border;
    text-align: right;
    p{
      margin-bottom: map-get($spacers, 3);
    }
    .button-signin, .button-signout{
      margin-top: 8px;
      width: auto;
    }
    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      display: none;
    }
  }

  .solution-info-mobile{
    padding: map-get($spacers, 5) map-get($spacers, 4);
    text-align: right;
    background-color: $color-gray-pale;
    p{
      margin-bottom: map-get($spacers, 3);
      &:last-child{
        margin-bottom: 0;
      }
    }
    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      display: none;
    }
  }


  .nav {
    $sliding-panel-width: 282px;
    @keyframes slidein-left {
      from {
        transform: translateX($sliding-panel-width);
      }

      to {
        transform: translateX(0);
      }
    }
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;

    background: $color-white;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
    padding-top: map-get($spacers, 4);
    width: $sliding-panel-width;
    z-index: $z-index-nav;

    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      border-left: none;
      display: block;
      overflow-y: visible;
      position: static;
      //transform: translateX(0);
      width: auto;
    }

    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      padding: 0;
      width: 100%;
    }

    &.is-visible {
      animation: slidein-left 0.3s ease-in-out;
      display: block;
    }
  }

  .nav-actions{
    margin-top: map-get($spacers, 3);
    &:first-child{
      margin-top: 0;
    }

    & > li{
      margin-top: map-get($spacers, 3);
      &:first-child{
        margin-top: 0;
      }
    }

    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      margin-top: 0;
      margin-left: auto;
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      flex-wrap: wrap;
      margin-right: -4px;
      & > li, & > li:first-child{
        margin: calc(#{map-get($spacers, 3)} - 2px) 4px;
      }
    }
  }

  .function-link:not(.icon-link) {
    @include media-breakpoint-down(#{$nav-responsive-breakpoint}) {
      display: block;
      margin-top: 8px;
      .icon-svg {
        float: left;
        margin-left: 0;
        margin-right: 4px;
      }
    }
  }
  .function-link + .function-link{
    @include media-breakpoint-up(#{$nav-responsive-breakpoint}) {
      margin-left: map-get($spacers, 4);

    }
  }
}

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: $color-black;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  visibility: hidden;
  z-index: $z-index-overlay;

  &.is-visible {
    opacity: 0.75;
    visibility: visible;
  }
}