@import '../../../../src/styles/common/colors';
@import '../../../../src/styles/common/screen';

.sidebar-toggle {
  background-color: transparent;
  border: medium none;
  cursor: pointer;
  height: 50px;
  left: 0;
  opacity: 0;
  outline: 0 none;
  padding-left: 5px;
  position: fixed;
  top: 0;
  transition: all 0.25s ease-in-out;
  width: 55px;
  visibility: none;

  @media #{$media-small-minus} {
    visibility: visible;
    left: 0;
    opacity: 1;

    &.sidebar-visible {
      background-color: $primary-4;
      left: 205px;
      padding-left: 0;

      .burger-piece {
        background-color: $white;

        &:first-of-type {
          transform: rotate(-40deg);
          top: 5px;
        }
        &:last-of-type {
          transform: rotate(40deg);
          top: -5px;
        }
        &:first-of-type, &:last-of-type {
          position: relative;
          left: -2px;
          width: 15px;
        }
      }
    }
  }

  .burger-piece {
    background-color: $primary-3;
    height: 3px;
    margin: 6px 9px;
    transition: all 0.25s ease-in-out;
    width: 35px;
  }
}