@import 'flive-vars';

.base {
  width: $column-width;
  flex-grow: 1;
  background: #F8F8FA;
  transition: all .3s;
  border-right: $column-border-size solid $layout-borders-color;
}

.fixed-left {
  composes: base;
  position: fixed;
  left: 0;
  margin-top: $header-border-size;
  top: $header-height-desktop;
  bottom: 0;
}

.fixed-right {
  composes: base;
  position: fixed;
  right: 0;
  margin-top: $header-border-size;
  top: $header-height-desktop;
  bottom: 0;
}

.backdrop {

}
.backdrop-open {
  position: fixed;
  top: $header-height-mobile;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
}

.toggle {
  display: none;
  position: fixed;
  top: 0;
  left: 6px;
  width: 44px;
  height: 44px;
  &:before {
    content: "";
    position: absolute;
    top: 14px;
    left: 10px;
    width: 24px;
    height: 2px;
    background-color: #3e3e3e;
    transition: all .3s;
  }
  &-inner {
    display: block;
    position: absolute;
    top: 21px;
    left: 10px;
    width: 18px;
    height: 2px;
    background-color: #3e3e3e;
    overflow: hidden;
    text-indent: -9999;
    transition: all .3s;
  }
  &:after {
    content: "";
    position: absolute;
    top: 28px;
    left: 10px;
    width: 12px;
    height: 2px;
    background-color: #3e3e3e;
    transition: all .3s;
  }
}

.toggle-active {
  &:before {
    transform: rotate(45deg);
    top: 21px;
    left: 8px;
    width: 25px;
  }
  .toggle-inner {
    width: 0;
    left: 16px;
  }
  &:after {
    width: 25px;
    top: 21px;
    left: 8px;
    transform: rotate(-45deg)
  }
}



@media (max-width: $breakpoint-max-mobile) {
  .fixed-left {
    left: - ($column-width + $column-border-size);
    top: $header-height-mobile + $header-border-size;
  }
  .fixed-right {
    right: $column-width + $column-border-size;
    top: $header-height-mobile + $header-border-size;
  }
  .toggle {
    display: block;
  }
  .open.fixed-left {
    left: 0;
  }
  .open.fixed-right {
    right: 0;
  }
}