@import "./vars.pcss";

.navigation {
  display: var(--navigationDisplay);
  flex-flow: var(--navigationFlexFlow);
  user-select: var(--navigationUserSelect);
  @mixin resetList;

  li&__item {
    width: var(--navigationItemWidth);
    height: var(--navigationItemHeight);
    font-weight: var(--navigationItemFontWeight);
    font-size: var(--navigationItemFontSize);
    line-height: var(--navigationItemLineHeight);
    aspect-ratio: var(--navigationItemAspectRatio);

    @mixin mr var(--navigationItemMr);

    &.isDisabled,
    &--isDisabled {
      --navigationLinkCursor: var(--navigationLinkDisabledCursor);
      --navigationLinkColor: var(--navigationLinkDisabledColor);
      --navigationLinkBgColor: var(--navigationLinkDisabledBgColor);
      --navigationLinkHoverColor: var(--navigationLinkColor);
      --navigationLinkHoverBgColor: var(--navigationLinkBgColor);
      --navigationLinkOpacity: var(--navigationLinkDisabledOpacity);
    }
  }

  div&__link,
  label&__link,
  a&__link {
    cursor: var(--navigationLinkCursor);
    color: var(--navigationLinkColor);
    background: var(--navigationLinkBgColor);
    transition: var(--navigationLinkTransition);
    border-radius: var(--navigationLinkBorderRadius);
    position: var(--navigationLinkPosition);
    border: var(--navigationLinkBorder);
    width: var(--navigationLinkWidth);
    height: var(--navigationLinkHeight);
    display: var(--navigationLinkDisplay);
    opacity: var(--navigationLinkOpacity);
    place-content: var(--navigationLinkPlaceContent);
    text-decoration: var(--navigationLinkTextDecoration);

    &--isHover,
    &.isHover,
    &:hover {
      @media (hover: hover) {
        --navigationLinkOpacity: var(--navigationLinkHoverOpacity);
        --navigationLinkColor: var(--navigationLinkHoverColor);
        --navigationLinkBgColor: var(--navigationLinkHoverBgColor);
      }
    }
  }
}