@use '../utilities/functions' as *;
@use '../utilities/mixins' as *;

@media (width <= 1279px) {
  .navbar {
    display: none;
  }
}

.navbar {
  position: fixed;
  top: fixed(0);
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  height: 100vh;
  line-height: 1.5rem;
  overflow-y: auto;
  border-right: 1px solid stroke(neutral);
  grid-area: sidebar;

  img {
    padding: fixed(16) fixed(16) fixed(0);
  }

  h6 {
    color: text(heading);

    @include font-scale(overtitle);
  }

  a {
    color: text(body);

    @include font-scale(body--lg);

    text-decoration: none;
  }

  &-section {
    padding: fixed(16);

    h6 {
      margin-bottom: fixed(8);
    }

    ul {
      gap: fixed(24);

      li {
        display: flex;
      }
    }

    a {
      position: relative;
      background-color: bg(surface, neutral);
      padding: fixed(16);
      border-radius: radius(md);
      transition: all 0.1s ease-in-out;
      width: 100%;

      &::before {
        content: '';
        position: absolute;
        border-radius: radius(md);
        inset: 0;
        opacity: 0;
        transition: opacity 0.2s;
        z-index: -1;
      }

      &:hover {
        filter: brightness(0.76);
      }

      &:active {
        filter: brightness(0.6);
      }
    }
  }
}

.menu-active {
  border-radius: radius(md);
  padding: fixed(16);
  background-color: #8733ff;
  color: text(inverse);
  cursor: default;
}