@import '../../imports';

.side-drawer {
  @include pin-left($side-drawer-width);
  background: $white;
  font-size: 13px;
  box-shadow: 1px 0 2px 0 hsla(0, 0, 0, 0.13), 2px 0 12px 0 hsla(0, 0, 0, 0.26);
  overflow: auto;

  .home-link {
    line-height: 34px;
    padding-left: $nav-padding;
    padding-right: $nav-padding;
    cursor: pointer;
    border-top: 1px solid #ddd;

    svg {
      height: 19px;
      width: 19px;
      display: inline-block;
      top: 7px;
      left: 0;
      margin-right: 9px;

      path {
        fill: rgba($black, 0.26);
      }
    }

    &:hover {
      background: rgba($brand, 0.12);

      svg path {
        fill: #888;
      }
    }
  }

  .items {
    .item {
      .icon svg path {
        fill: rgba($black, 0.26);
      }

      &.selected {
        .icon svg path {
          fill: $brand;
        }
      }
    }
  }

  .nav-logo {
    cursor: pointer;
  }
}

.side-drawer-enter {
  transform: translate(-$side-drawer-width - 1, 0);

  &.side-drawer-enter-active {
    transform: translate(0, 0);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1) .1s;
  }
}

.side-drawer-leave {
  transform: translate(0, 0);

  &.side-drawer-leave-active {
    transform: translate(-$side-drawer-width - 1, 0);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1) .1s;
  }
}