.navItem {
  display: flex;
  align-items: center;
  gap: map.get($spacing-scale, 'sm');
  padding: map.get($spacing-scale, 's-2') map.get($spacing-scale, 'sm');
  border-radius: map.get($radius, 'md');
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  user-select: none;

  @include transition(background-color, color);

  &:hover:not(.active) {
    background-color: var(--color-grey-light);
  }
}

.active {
  background-color: var(--color-primary-opacity-06);

  .label {
    color: var(--color-primary-base);
    font-weight: map.get($font-weights, 'semibold');
  }

  .iconWrapper {
    color: var(--color-primary-base);
  }
}

.iconWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--color-text-primary);

  svg {
    width: 20px;
    height: 20px;
  }
}

.label {
  @include body-small-medium;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}