:root {
  --fs-mini-cart-drawer-gap: var(--fs-blocks-spacing-sm);
  --fs-mini-cart-drawer-padding: var(--fs-blocks-spacing-lg);
}

.fs-block-mini-cart {
  --fs-nav-item-gap: var(--fs-blocks-spacing-sm);
  --fs-nav-dropdown-toggle-size: var(--wp--preset--font-size--xl);
  --fs-nav-dropdown-width: calc(280px + var(--fs-nav-dropdown-padding-inline) * 2);
  --fs-nav-dropdown-padding-block: var(--fs-blocks-spacing-lg);
  --fs-nav-dropdown-padding-inline: var(--fs-nav-dropdown-padding-block);
  --fs-text-display: block;

  &.has-child {
    grid-template-columns: none;
  }
}

.fs-block-mini-cart__label,
.fs-block-mini-cart__separator,
.fs-block-mini-cart__total {
  display: var(--fs-text-display);
}

.fs-block-mini-cart__total {
  margin-inline-end: calc(var(--fs-blocks-spacing-sm) - var(--fs-nav-link-gap));
}

.fs-block-mini-cart__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;

  &.is-bag {
    width: var(--fs-nav-dropdown-toggle-size);
    height: var(--fs-nav-dropdown-toggle-size);
    font-weight: 700;
    font-size: 0.875em;
    color: var(--fs-blocks-color-primary);
    border: 2px solid var(--fs-blocks-color-primary);
    border-radius: calc(var(--fs-blocks-radius) / 2);

    /* Bag handle */
    &::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 1em;
      height: 0.5em;
      border: inherit;
      border-bottom: 0;
      border-top-left-radius: 999px;
      border-top-right-radius: 999px;
      transition: height 0.1s;
    }
  }
}

.fs-block-mini-cart__indicator {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  height: 1.25em;
  padding-inline: 0.25em;
  font-size: var(--fs-mini-cart-indicator-font-size, 0.75em);
  font-weight: 700;
  line-height: 1;
  color: var(--fs-mini-cart-indicator-color, var(--fs-blocks-color-background));
  background-color: var(--fs-mini-cart-indicator-background, var(--fs-blocks-color-secondary));
  border-style: var(--fs-mini-cart-indicator-border-style, none);
  border-color: var(--fs-mini-cart-indicator-border-color, currentColor);
  border-radius: 999px;
}

.fs-block-mini-cart.is-open .fs-block-mini-cart__toggle.is-bag,
.fs-block-mini-cart__link:hover .fs-block-mini-cart__toggle.is-bag,
.fs-block-mini-cart__toggle.is-bag[aria-expanded="true"] {
  color: var(--fs-blocks-color-background);
  background-color: var(--fs-blocks-color-primary);

  &::after {
    height: 0.6em;
  }
}

.fs-block-mini-cart__overlay {
  --fs-block-gap: var(--fs-mini-cart-drawer-gap);

  .fs-block-popover__content {
    --bg-color: var(--fs-blocks-color-background);
    --color: var(--fs-blocks-color-foreground);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--fs-block-gap);
    overflow-y: auto;
    padding-block-start: var(--fs-mini-cart-drawer-padding);
    padding-inline: var(--fs-mini-cart-drawer-padding);

    > .wp-block-template-part {
      display: contents;
    }
  }

  .wc-block-mini-cart__items {
    overflow-y: visible;
    padding: 0;
  }
}

:where(.fs-block-nav-overlay__content > .wp-block-template-part > :is(h1, h2, h3, h4, h5, h6)) + .fs-block-divider {
  margin-top: 0;
}