@layer components {
  .navigation-top {
    background-color: var(--default-color-primary);
    width: 100%;
    box-shadow: var(--shadow-3);
  }

  .navigation-top__content {
    max-width: var(--max-reach-lg-x7);
    position: relative;
    margin-inline: auto;
    padding: var(--length-4) var(--length-5);
  }

  .navigation-top__logo {
    width: fit-content;
    height: fit-content;

    img {
      width: auto;
      height: var(--length-16);
    }
  }

  .navigation-top__buttons-container {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    position: absolute;
    right: var(--length-5);
    top: 0;
    height: 100%;
  }

  .navigation-top__button {
    cursor: pointer;
    display: flex;
    transition: scale 100ms ease-out;

    svg {
      margin: auto 0;
      width: var(--length-10);
      height: var(--length-10);
      color: var(--color-white);
    }
  }

  .navigation-top__button--cart {
    position: relative;
  }

  /* Red dot indicator shown on the cart icon when the cart has items.
     No number — purely an "active cart" indicator. Hidden when empty
     (the element is not rendered when cart_item_count is 0). */
  .navigation-top__cart-badge {
    position: absolute;
    top: calc(-1 * var(--space-sm-x1));
    right: calc(-1 * var(--space-sm-x1));
    width: var(--length-5);
    height: var(--length-5);
    background-color: var(--color-red-5);
    border: var(--border-width-2) solid var(--color-white);
    border-radius: var(--border-radius-round);
    pointer-events: none;
  }

  @media (any-hover: hover) {
    .navigation-top__button:hover {
      scale: 0.95;
    }
  }

  .navigation-top__button:active {
    scale: 0.85;
  }

  .navgiation-top__popover {
    display: none;
    position: absolute;
    bottom: calc(0 - var(--length-4));
    right: var(--length-3);
    padding-inline: var(--length-8);
    padding-top: var(--length-4);
    padding-bottom: var(--length-4);
    background: var(--color-primary-0);
    box-shadow: var(--shadow-3);

    /* For transitioning */
    opacity: 1;
    scale: 1;
    transition:
      opacity 0.25s ease,
      scale 0.25s ease,
      display 0.25s ease;
    transition-behavior: allow-discrete;

    @starting-style {
      opacity: 0;
      scale: 0.96;
    }

    li {
      font-size: var(--font-size-sm-x1);

      a {
        cursor: pointer;
        text-decoration: underline;

        &:hover {
          color: var(--color-primary-600);
        }
      }
    }

    &.navgiation-top__popover--exiting {
      opacity: 0;
      scale: 0.96;
      transition-behavior: normal;
    }
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >=40rem) {
    .navigation-top__logo {
      margin-inline: auto;

      img {
        margin-inline: auto;
      }
    }
  }
}