// Header

header.header{
  & > .middle{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:9;
    color:$black;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-top:50px;
  }

  & > .middle > .inner{
    position:relative;
    max-width:$desktop-max-width;
    margin-left:auto;
    margin-right:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    
    width:100%;
    padding-left:$desktop-gutter;
    padding-right:$desktop-gutter;

    & > a{
      display:block;
      height:40px;
    }
  }
  
  .logo{
    z-index:1;
    font-weight:700;
    width:220px;
    height:40px;

    div{
      width:220px;
      height:40px;
    }
  }
  
  &.dark {
    .logo-text-color {
      fill:$white !important;
    }
    
    a:not(.button){
      color:$white;
    }
  }
  
  &.light {
    .logo-text-color {
      fill:#231F20 !important;
    }
    
    a:not(.button){
      color:#231F20;
    }
  }
}

@include breakpoint($laptop-tablet){
  header.header{
    & > .middle > .inner{
      padding-left:$desktop-gutter-tablet-landscape;
      padding-right:$desktop-gutter-tablet-landscape;
    }

    .logo{
      transform:scale(0.8);
      transform-origin:0 0;
    }
  }
}

@include breakpoint($tablet-landscape){
  header.header{
    & > .middle{
      padding-top:30px;
    }

    & > .middle > .inner{
      padding-left:$desktop-gutter-tablet-landscape;
      padding-right:$desktop-gutter-tablet-landscape;
    }

    .logo{
      transform:scale(0.8);
      transform-origin:0 0;
    }
  }
}

@include breakpoint($tablet-portrait){
  header.header{
    & > .middle{
      padding-top:30px;
    }

    & > .middle > .inner{
      padding-left:$desktop-gutter-tablet-portrait;
      padding-right:$desktop-gutter-tablet-portrait;
    }

    .nav{
      display:none;
    }
  }
}

@include breakpoint($phone){
  header.header{
    & > .middle > .inner{
      padding-left:$desktop-gutter-phone;
      padding-right:$desktop-gutter-phone;
    }
  }
  
}
