@use "sass:map";
@use '../settings/index' as *;

.aside {
  grid-area: aside;
  display: flex;
  justify-content: flex-start;
  padding: 0 $gutter;
  @media screen and (min-width: map.get($breakpoints, 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: map.get($breakpoints, 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;
  }
}