@import './../../styles/_base';

$nav-break: 45em;

.ngx-nav-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: $color-transparent-grey;
  display: none;
}

.ngx-nav-drawer {
  top: 0;
  bottom: 0;
  left: 0;
  width: 240px;
  height: 100%;
  left: -300px;
  position: fixed;
  z-index: 4;
  background-color: $color-white;
  overflow-y: auto;
  transition: left 0.3s;
  will-change: left;
  border-right: 1px solid $color-border;

  a,
  button {
    display: block;
    padding: 18px 13px 16px 26px;
    font-size: 1em;
    text-decoration: none;
    font-weight: 300;
    color: $color-grey-dark;
    position: relative;
    font-weight: bold;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;

    &:hover,
    &:active,
    &:focus {
      background: darken($color-white, 5%);
    }
  }
}

.ngx-nav-drawer-open {
  .ngx-nav-drawer {
    left: 0;
  }

  .ngx-nav-drawer-overlay {
    display: block;
  }
}

.ngx-nav-drawer-fixed {
  .ngx-nav-drawer {
    left: 0;
  }

  .ngx-nav-drawer-overlay {
    display: none;
  }
}
