@import '../settings/_index';

.aside {
  grid-area: aside;
  display: flex;
  justify-content: flex-start;
  padding: 0 @gutter;

  @media screen and (min-width: @breakpoint-lg) {
    padding: 0;
  }
}

.navigation {
  background: var(--bg-surface);
  box-shadow: var(--shadow-outline);
  border-radius: @border-radius;
  padding: @gutter;
  width: 100%;

  @media screen and (min-width: @breakpoint-lg) {
    padding: calc(@gutter * 2);
  }
}

.list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;

  &__item {
    width: 100%;

    &:hover {
      .list__link {
        color: var(--brand-600);
      }
    }
  }

  &__link {
    color: var(--text-primary);
    display: block;
    width: 100%;
    padding: .375rem .625rem;
  }
}