@import "flive-vars";

.base{
  display:flex;
  align-items: center;
  height:$header-height-desktop;
  font-size:1.5em;
  letter-spacing: .1em;
  z-index:999;
  cursor:pointer;
  text-decoration: none;
  margin-left:-$content-padding-desktop; //counterbalance header padding
  @include sideMenuPadding();
  color:$black-grey;
  background:$white;
  border-right: 1px solid $nav-border-color;

  &.dark{
    color:$white;
    background:$darker-grey;
    border-right:none;
  }

  &.sm{
    width:$sidemenu-width-sm;
  }
  &.md{
    width:$sidemenu-width-md;
  }
  &.lg{
    width:$sidemenu-width-lg;
  }

  &.hidden-xs{
    @media (max-width:$screen-xs-max){
      display:none
    }
  }
  &.hidden-sm{
    @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max){
      display:none
    }
  }
  &.hidden-md{
    @media (min-width:$screen-md-min) and (max-width:$screen-md-max){
      display:none
    }
  }
  &.hidden-lg{
    @media (min-width:$screen-lg-min) and (max-width:$screen-lg-max){
      display:none
    }
  }
  &.hidden-xl{
    @media (min-width:$screen-xl-min){
      display:none
    }
  }
}