header {
  $logo-height: px2rem(60px);

  .hmn-logo {
    height: $logo-height;
    width: 100%;
    text-transform: uppercase;
    font-family: 'MohaveHMN', sans-serif;
    font-size: 2rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;

    &.big {
      @media #{$breakpoint-not-small} {
        width: px2rem(180px);
      }
    }

    &.small {
      @media #{$breakpoint-not-small} {
        width: $logo-height;
        padding: 0.8rem;
        text-align: justify;
		text-align-last: justify;
        text-justify: inter-character;
        flex-direction: column;
        font-size: 1rem;
        line-height: 1em;
        align-items: stretch;
      }
    }
  }

  .items {
    position: relative; // will be used on mobile, when .root-item is not relative
  }

  .root-item {
    @media #{$breakpoint-not-small} {
      & {
        position: relative; // makes submenus align to this item instead of the screen
        height: $logo-height;
      }
    }

    &:not(:hover):not(.clicked) > .submenu {
      display: none;
    }

    &.clicked .svgicon {
      transform: rotate(180deg);
    }

    > a {
      @extend .pa2, .ph3-l;

      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-weight: bold;
    }

    .svgicon {
      font-size: 0.7em;
    }
  }

  &:not(.clicked) .root-item:not(:hover),
  &.clicked .root-item:not(.clicked) {
    > .submenu {
      display: none;
    }
  }

  .submenu {
    @extend .bw1;
    @include usevar(background-color, content-background);

    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    min-width: 10rem;
    border-top-style: solid;
    border-bottom-style: solid;

    @media #{$breakpoint-not-small} {
      & {
        border-top-style: none;
        border-left-style: solid;
        border-right-style: solid;
        left: initial;
        right: initial;
      }
    }

    > a {
      @extend .pa2, .ph3-l;

      display: block;
      white-space: nowrap;
      z-index: 1;
      font-weight: bold;
      text-align: center;

      @media #{$breakpoint-not-small} {
        & {
          text-align: left;
        }
      }
    }
  }

  .menu-bar {
    width: 100%;
    z-index: 10;
  }
  
  #login-link{
    cursor: pointer;
  }

  #login-popup {
    @include usevar(background-color, login-popup-background);
    @include usevar(color, fg-font-color);
    
    @extend .pa3;
    
    border-width: 1px;
    border-style: dashed;
    @extend .b--dimmest;
    
    visibility: hidden;
    position: absolute;
    z-index: 12;
    margin-top: 10px;
    right: 0px;
    top: 20px;
    width: 290px;
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    
    transition: all 0.2s;
    
    &.open {
      max-height: 170px;
      opacity: 1;
      visibility: visible;
    }
    
    label {
      padding-right:10px;
    }
  }
}