@import '~@/styles/vars';

nav {
  background-color: $color2;
  color: $color3;
  display: flex;
  flex-direction: column;
  font-family: 'Exo 2';

  &.expanded {
    .collapsed { display: none; }
    .collapse-handle { align-self: flex-end; }
  }

  &.collapsed {
    .expanded { display: none; }
    svg { font-size: 2.2rem; }
    .collapse-handle { align-self: center; }
  }

  a {
    color: inherit;
    display: block;
    text-decoration: none;
    width: 100%;

    &.router-link-active { color: $color4; }
    &:hover { color: $color4; }
  }

  & > a {
    font-size: 1.5rem;
    padding: .5rem 0;

    svg {
      display: inline-block;
      min-width: 1.5em;
    }
  }

  .logo {
    padding: 0 0 1rem;
    white-space: nowrap;
  }

  & > .collapse-handle {
    cursor: pointer;
    font-size: 1.5rem;
    margin-top: auto;
  }

  .submenu {
    margin: .5em 0 0 1.6em;

    a {
      color: $color3;
      font-size: 1.2rem;

      &.router-link-active { color: $color4; }
      &:hover { color: $color4; }
    }
  }
}