NavListItem.css

/**
 * NavListItem
 */

@import '../variables.css';

.NavListItem {
  composes: interactionStyles hasDot focusDotPositionStart from "../sharedStyles/interactionStyles.css";
  align-items: center;
  color: var(--color-text);
  display: flex;
  font-size: var(--font-size-medium);
  font-weight: var(--text-weight-medium);
  line-height: var(--line-height);
  min-height: var(--control-min-size-desktop);
  outline: 0;
  padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds);
  width: 100%;
  background-color: var(--color-fill-table-row-even);

  &::before {
    border-radius: 0;
  }

  /* for anchor tags */
  &:visited {
    color: var(--color-text);
  }

  &:active {
    color: #fff;
  }

  &.striped:nth-child(odd):not(.isActive) {
    background-color: var(--color-fill-table-row-odd);
  }

  &.isActive {
    color: #fff;
    background-color: var(--color-fill-current);

    /* Make sure child elements has
    white text color when item is active */
    & * {
      color: #fff;
    }

    /* Custom universal interaction styling */
    &::after {
      background-color: #fff;
    }
  }
}