.navigation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--Navigation-Pill-Gap, 8px);
  padding: var(--Navigation-Pill-Vertical-Padding)
           var(--Navigation-Pill-Horizontal-Padding);
  border: var(--Stroke-S) solid transparent;
  border-radius: var(--Navigation-Pill-Radius);
  font: var(--Body-Small-Medium);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  min-height: var(--P24);
  box-sizing: border-box;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, outline-color 0.3s ease-in-out;

  & .icon {
    color: currentcolor;
  }

  & .pill-label {
    font: var(--Body-Small-Medium);
  }
}

/* Primary */
.navigation-pill-primary {
  color: var(--Navigation-Pill-Primary-Default-Text);
  background-color: var(--Navigation-Pill-Primary-Default-Background);

  & .logout-btn {
    position: absolute;
    right: 0;
    top: 3rem;
    text-align: left;
    white-space: nowrap;
  }
}

/* Hover Status */
.navigation-pill-primary:hover:not(:disabled),
.navigation-pill-primary.is-hover:not(:disabled) {
  color: var(--Navigation-Pill-Primary-Hover-Text);
  background-color: var(--Navigation-Pill-Primary-Hover-Background);
}

/* Active Status */
.navigation-pill-primary:active:not(:disabled),
.navigation-pill-primary.is-active:not(:disabled) {
  color: var(--Navigation-Pill-Active-Text);
  background-color: var(--Navigation-Pill-Active-Background);
}

/* Primary small */
.navigation-pill-primary-small {
  gap: var(--Navigation-Pill-Gap-Small, 2px);
  color: var(--Navigation-Pill-Primary-Small-Default-Text);
  background-color: var(--Navigation-Pill-Primary-Small-Default-Background);

  & .icon {
    width: var(--Icon-100-10, 0.625rem);
    height: var(--Icon-100-10, 0.625rem);
    font-size: var(--Icon-100-10, 0.625rem);
  }
}

.navigation-pill-primary-small:hover:not(:disabled),
.navigation-pill-primary-small.is-hover:not(:disabled) {
  color: var(--Navigation-Pill-Primary-Small-Hover-Text);
  background-color: var(--Navigation-Pill-Primary-Small-Hover-Background);
}

.navigation-pill-primary-small:active:not(:disabled),
.navigation-pill-primary-small.is-active:not(:disabled) {
  color: var(--Navigation-Pill-Active-Text);
  background-color: var(--Navigation-Pill-Active-Background);
}

.navigation-pill-mobile .pill-label {
  font: var(--Body-Medium, var(--Body-Small-Medium));
}

/* Secondary */
.navigation-pill-secondary {
  color: var(--Navigation-Pill-Secondary-Default-Text);
  background-color: var(--Navigation-Pill-Secondary-Default-Background);
}

/* Hover Status */
.navigation-pill-secondary:hover:not(:disabled),
.navigation-pill-secondary.is-hover:not(:disabled) {
  color: var(--Navigation-Pill-Secondary-Hover-Text);
  background-color: var(--Navigation-Pill-Secondary-Hover-Background);
}

/* Active Status */
.navigation-pill-secondary:active:not(:disabled),
.navigation-pill-secondary.is-active:not(:disabled) {
  color: var(--Navigation-Pill-Active-Text);
  background-color: var(--Navigation-Pill-Active-Background);
}

/* Focused Status */
.navigation-pill:focus,
.navigation-pill:focus-visible,
.navigation-pill.is-focused {
  outline: var(--Navigation-Pill-Border-Focus, var(--Stroke-S)) solid var(--Border-Key-Brand-Mild-Focused);
  outline-offset: 0;
}

.navigation-pill.is-disabled,
.navigation-pill:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.navigation-pill-block {
  display: block;
  margin: 1rem 0;
}

.header-utilities-container .navigation-pill[id^='basket'].has-items {
  background: var(--Background-Neutral-Subtlest-Fixed, #fff);
}

@media (width < 1200px) {
  .navigation-pill-container > .navigation-pill-wrapper > .navigation-pill .pill-label {
    font: var(--Body-Small-Medium);
  }

  /* Hamburger menu items only — not the fixed bottom navigation pills */
  #header-hamburger-menu .mobile-nav-hidden-pills {
    & .navigation-pill .pill-label {
      font: var(--Heading-Fixed);
    }
  }

  #header-hamburger-menu .mobile-nav-box-container button.navigation-pill .pill-label {
    font: var(--Single-Line-Subheading-Link);
    text-decoration: underline;
  }
}

@media (width < 768px) {
  .navigation-pill-container > .navigation-pill-wrapper > .navigation-pill .pill-label {
    font: var(--Body-Small-Medium);
  }

  #header-hamburger-menu .mobile-nav-box-container button.navigation-pill .pill-label {
    font: var(--Single-Line-Body-Link);
    text-decoration: underline;
  }
}