@use "sass:color";
@use "./../variables" as *;
@use "./../mixins/list" as *;
@use "./../mixins/colors" as *;

.nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  position: relative;

  @include make-list-unstyled;

  & .nav__label,
  & .nav__title,
  & .nav__item {
    --nav-item-border-width: 1px;
    --nav-item-border-style: solid;
    --nav-item-border-color: transparent;
    --nav-item-active-border-color: transparent;
    --nav-item-border-radius: 0;
    --nav-item-line-height: #{$nav-item-line-height};
    --nav-item-padding-x: #{$nav-item-padding-x};
    --nav-item-padding-y: #{$nav-item-padding-y};
    --nav-item-color: var(--html-color);
    --nav-item-hover-color: color-mix(in oklab, var(--html-color), #000 #{$link-shade-percentage});
    --nav-item-focus-color: color-mix(in oklab, var(--html-color), #000 #{$link-shade-percentage});
    --nav-item-active-color: color-mix(in oklab, var(--html-color), #000 #{$link-shade-percentage});
    --nav-item-disabled-color: hsl(from var(--html-color) h s l / #{$color-disabled-alpha});
    --nav-label-hover-color: var(--medium);
    --nav-item-background: hsl(from var(--white) h s l / 0%);
    --nav-item-hover-background: hsl(from var(--white) h s l / 30%);
    --nav-item-focus-background: hsl(from var(--white) h s l / 30%);
    --nav-item-active-background: hsl(from var(--white) h s l / 20%);
    --nav-item-disabled-background: hsl(from var(--white) h s l / 0%);

    border-width: var(--nav-item-border-width);
    border-style: var(--nav-item-border-style);
    border-color: var(--nav-item-border-color);
    border-radius: var(--nav-item-border-radius);
    padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
    color: var(--nav-item-color);
    background-color: var(--nav-item-background);
    line-height: var(--nav-item-line-height);
    white-space: nowrap;
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
  }

  & .nav__label {
    font-size: var(--font-size-small);
    font-weight: bolder;
    color: var(--nav-label-hover-color);
  }

  & .nav__title {
    font-style: $headings-font-style;
    font-weight: $headings-font-weight;
    color: $headings-color;
  }

  & .nav__item {
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    outline: 0;
    transition: $form-transition;

    &:hover {
      color: var(--nav-item-hover-color);
      background: var(--nav-item-hover-background);
    }

    &:focus-visible {
      color: var(--nav-item-focus-color);
      background: var(--nav-item-focus-background);
    }

    &[aria-current="page"],
    &[data-active="true"],
    &[aria-selected="true"],
    &:active,
    &.active {
      color: var(--nav-item-active-color);
      background: var(--nav-item-active-background);

      &:hover {
        background: var(--nav-item-hover-background);
      }
    }

    &:disabled,
    &.disabled,
    fieldset:disabled & {
      color: var(--nav-item-disabled-color);
      background: var(--nav-item-disabled-background);
      pointer-events: none;
    }
  }

  &.nav--column {
    flex-flow: column nowrap;
    align-items: stretch;

    & .nav__label,
    & .nav__title,
    & .nav__item {
      text-align: left;
      justify-content: flex-start;
      display: flex;
    }
  }
}