@import '../../../../constants/theme.scss';
@import '../../../../utils/mixins.scss';

.menu {
  @include theme(background-color, grey4);
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;

  @media screen and (min-width: 1200px) {
    @include theme(border-right, divider, 1px solid);
    position: relative;
    height: 100vh !important;
    opacity: 1 !important;
    width: 25rem;
  }
}

.title {
  @include theme(background-color, grey4);
  @include theme(color, blue1);
  @include spacing(2rem);
  font-size: 2rem;
  position: sticky;
  top: 0;
  z-index: 60;
}

.menuItems {
  @include spacing(1rem, 0);
  display: flex;
  flex-direction: column;
}

.menuListItem {
  list-style: none;
}

.menuItemBase {
  @include theme(color, contrast2);
  @include spacing(1.5rem 1rem);
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: $transparent;
  border-radius: 0.5rem;
}

.menuItem {
  composes: menuItemBase;

  &:hover {
    @include theme(background-color, grey7);
    @include theme(color, blue1);
    cursor: pointer;
  }
}

.menuItemActive {
  composes: menuItemBase;
  @include theme(background-color, blue1);
  @include theme(color, accent1);
  cursor: default;
}

.menuButton {
  display: block;
  position: fixed;
  top: 1rem;
  right: 0.5rem;
  z-index: 100;

  @media screen and (min-width: 1200px) {
    display: none;
  }
}
