/**
 * @file
 * Basket control in the CycleIn public header.
 */

.cyclein-commerce-basket {
  align-items: center;
  block-size: var(--a11y-min-target);
  color: var(--color-brand-white);
  display: inline-flex;
  flex: 0 0 var(--a11y-min-target);
  inline-size: var(--a11y-min-target);
  justify-content: center;
  position: relative;
  text-decoration: none;
}

.cyclein-commerce-basket:hover {
  color: var(--color-brand-yellow);
}

.cyclein-commerce-basket__icon {
  block-size: 28px;
  fill: none;
  inline-size: 28px;
  overflow: visible;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cyclein-commerce-basket__count {
  align-items: center;
  background: var(--color-brand-yellow);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: inline-flex;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  inset-block-start: -1px;
  inset-inline-end: -1px;
  justify-content: center;
  line-height: 1;
  min-block-size: 22px;
  min-inline-size: 22px;
  padding-inline: 5px;
  position: absolute;
}

.path-frontpage .cyclein-commerce-basket {
  color: var(--color-brand-black);
}

.path-frontpage .cyclein-commerce-basket:hover {
  color: var(--color-brand-pink);
}

.path-frontpage .cyclein-commerce-basket__count {
  background: var(--color-brand-pink);
  color: var(--color-brand-white);
}

@media (min-width: 1200px) {
  /* Continue the homepage's single lime nav pill through the basket control.
     Keep the same 24px basket-to-account spacing used by internal headers;
     the box shadow paints the otherwise transparent flex gap so the homepage
     still reads as one continuous lime control group. */
  .path-frontpage .cyclein-commerce-basket {
    background: var(--color-brand-yellow);
    block-size: 60px;
    box-shadow: var(--space-24) 0 0 var(--color-brand-yellow);
    margin-inline-start: calc(-1 * var(--space-24));
  }

  body.path-frontpage .cyclein-global-header .cyclein-global-header__account {
    margin-inline-start: 0;
  }
}

@media (max-width: 767px) {
  .cyclein-commerce-basket {
    order: 1;
  }

  /* Keep the collapsed bar to the design's brand + basket + menu row. The
     account control remains available inside the expanded mobile navigation. */
  .cyclein-global-header:has(.cyclein-commerce-basket) .cyclein-global-header__account {
    display: none;
  }

  .cyclein-global-header:has(.cyclein-commerce-basket):has(.cyclein-global-header__toggle[aria-expanded="true"]) .cyclein-global-header__account {
    display: block;
    flex-basis: 100%;
    margin-block-start: var(--space-24);
    order: 4;
  }

  /* The phone homepage uses the same solid dark header as internal pages. */
  .path-frontpage .cyclein-commerce-basket,
  .cyclein-global-header:has([aria-expanded="true"]) .cyclein-commerce-basket {
    color: var(--color-brand-white);
  }
}