@import "flive-vars";

.base{
  display:flex;
  position:fixed;
  &.right{
    right:0;
  }
  width:$header-height-desktop;
  height:$header-height-desktop;
  border:0;
  z-index:999;
  cursor:pointer;

  &.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
    }
  }

  .middle{
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 10px);
    right: calc(50% - 10px);
    height: 2px;
    background: $black-grey;

    &::before,&::after{
      transition:.2s;
      position: absolute;
      display: block;
      left: 0;
      width: 100%;
      height: 2px;
      content: "";
    }
    &::before{
      top: -5px;
    }
    &::after{
      bottom: -5px;
    }

  }

  &.light{
    .middle{
      background-color: $black-grey;
      &::before,&::after{
        background-color: $black-grey;
      }
    }
  }

  &.dark{
    .middle{
      background-color: $white;
      &::before,&::after{
        background-color: $white;
      }
    }
  }

  &.state-open{
    .middle{
      background:none;

      &::before{
        top: 0;
      }
      &::after{
        bottom: 0;
      }
    }
    &.left{
      .middle::before{
        transform: rotate(-45deg);
      }
      .middle::after{
        transform: rotate(-135deg);
      }
    }
    &.right{
      .middle::before{
        transform: rotate(45deg);
      }
      .middle::after{
        transform: rotate(135deg);
      }
    }
  }
}

/** variant */
.light{
  color:$black-grey;
  background:transparent;
  &.state-open{
    background:white;
  }
}
.dark{
  color:white;
  background:$black-grey;
}