@import '@/src/styles/utils/mixins';

.nav_item {
  width: 100%;
  @include generatePxToRem('padding', 8);
  @include generatePxToRem('border-radius', 8);
  border: 2px solid transparent;
  transition: all 0.15s ease;

  &:hover {
    @include generatePxToRem('border-radius', 8);
    border: 2px solid var(--heading-sidebar-bg-color);
  }

  &.separator {
    @include generatePxToRem('padding', 14 16 0 4);

    &:hover {
      border: 2px solid transparent;
    }

    > p {
      @include sidebar-heading-separator(var(--text-heading));
      text-transform: uppercase;
    }
  }

  &.selected {
    width: 100%;

    // Check /src/styles/nextra.scss for the rest of the styling
  }

  &.visible {
    background-color: #2A2A2A;
  }

  > p {
    margin: 0;
    @include heading-h5(var(--text-subheading));

    &:first-letter {
      text-transform: uppercase;
    }
  }
}
