@import '../../../scss/styles.scss';

.nav {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  width: base(9);
  overflow: hidden;
  border-right: 1px solid var(--theme-elevation-100);

  header {
    width: 100%;
    display: flex;
    margin-bottom: base(1.5);

    a,
    button {
      display: block;
      padding: 0;

      svg {
        display: block;
      }
    }
  }

  &__brand {
    margin-right: base(1);
  }

  &__mobile-menu-btn {
    background: none;
    border: 0;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;

    &:active,
    &:focus {
      outline: none;
    }
  }

  &__scroll {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: base(1.5) base(1);
    width: calc(100% + #{base(1)});
    overflow-y: scroll;
  }

  &__wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
  }

  &__label {
    color: var(--theme-elevation-400);
  }

  &__controls {
    margin-top: auto;
    margin-bottom: 0;

    >* {
      margin-top: base(1);
    }
  }

  &__log-out {
    &:hover {
      g {
        transform: translateX(- #{base(.125)});
      }
    }
  }

  a {
    padding: base(.125) 0;
    display: flex;
    text-decoration: none;

    &:focus {
      box-shadow: none;
      font-weight: 600;
    }

    &:active {
      font-weight: normal;
    }
  }

  nav {
    margin: base(.25) 0 $baseline;

    a {
      position: relative;

      svg {
        opacity: 0;
        position: absolute;
        left: - base(.5);
        transform: rotate(-90deg);
      }

      &:hover {
        text-decoration: underline;
      }

      &.active {
        padding-left: base(.6);
        font-weight: 600;

        svg {
          opacity: 1;
        }
      }
    }
  }

  @include large-break {
    width: base(8);
  }

  @include mid-break {
    @include blur-bg;
    position: fixed;
    width: 100%;
    height: base(3);
    z-index: var(--z-modal);

    &__scroll {
      padding: 0;
      overflow: hidden;
      width: 100%;
      display: block;
    }

    header,
    &__wrap {
      position: relative;
      z-index: 1;
      padding: $baseline var(--gutter-h);
    }

    header {
      justify-content: space-between;
      margin: 0;
    }

    &__mobile-menu-btn {
      opacity: 1;
      visibility: visible;
    }

    &__wrap {
      padding-top: 0;
      visibility: hidden;
      opacity: 0;
      overflow-y: scroll;
      position: fixed;
      top: base(4);
      bottom: 0;
    }

    &.nav--menu-active {
      height: 100vh;

      .nav__wrap {
        visibility: visible;
        opacity: 1;
      }
    }

    nav a {
      font-size: base(.875);
      line-height: base(1.25);
      font-weight: 600;
    }
  }
}