/**
 * The Keepers Attribute Descriptions: swatches of [wcad_more_options
 * swatches="…"] on product cards. While the card is hovered, the text
 * ("+ 3 colours") gives way to a row of overlapping swatches in the same
 * place, so nothing on the card moves.
 *
 * Custom properties: --wcad-card-swatch-size (default 1.1em),
 * --wcad-card-swatch-overlap (0.3em), --wcad-card-swatch-ring (ring between
 * swatches, default the card's background or white).
 *
 * @package The_Keepers_Attribute_Descriptions
 */

.wcad-more-options__item.has-swatches {
    display: inline-grid;
    align-items: center;
    justify-items: start;
    vertical-align: middle;
}

.wcad-more-options__item.has-swatches > * {
    grid-area: 1 / 1;
}

.wcad-more-options__text,
.wcad-more-options__swatches {
    transition: opacity 0.18s ease, visibility 0.18s;
}

.wcad-more-options__swatches {
    display: inline-flex;
    align-items: center;
    padding-left: var(--wcad-card-swatch-overlap, 0.3em);
    opacity: 0;
    visibility: hidden;
}

.wcad-more-options__swatch {
    flex: none;
    width: var(--wcad-card-swatch-size, 1.1em);
    height: var(--wcad-card-swatch-size, 1.1em);
    margin-left: calc(var(--wcad-card-swatch-overlap, 0.3em) * -1);
    border-radius: 50%;
    background-image: var(--wcad-swatch);
    background-size: cover;
    background-position: center;
    /* A ring in the card's colour separates overlapping swatches; the inner
       hairline keeps white swatches visible. */
    box-shadow: 0 0 0 1.5px var(--wcad-card-swatch-ring, var(--wp--preset--color--custom-white, #fff)), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.wcad-more-options__plus {
    margin-left: 0.3em;
    line-height: 1;
}

/* Hovering the card (block or classic markup), or the text itself. Only list
   items: on a product page the body carries .type-product too, so a broader
   selector showed every card's swatches while the pointer was on the page. */
@media (hover: hover) {
    :where(li.wc-block-product, .wc-block-grid__product, li.product, li.type-product, li.wp-block-post):hover .has-swatches > .wcad-more-options__text,
    .wcad-more-options:hover .has-swatches > .wcad-more-options__text,
    :where(li.wc-block-product, .wc-block-grid__product, li.product, li.type-product, li.wp-block-post):focus-within .has-swatches > .wcad-more-options__text {
        opacity: 0;
        visibility: hidden;
    }

    :where(li.wc-block-product, .wc-block-grid__product, li.product, li.type-product, li.wp-block-post):hover .has-swatches > .wcad-more-options__swatches,
    .wcad-more-options:hover .has-swatches > .wcad-more-options__swatches,
    :where(li.wc-block-product, .wc-block-grid__product, li.product, li.type-product, li.wp-block-post):focus-within .has-swatches > .wcad-more-options__swatches {
        opacity: 1;
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wcad-more-options__text,
    .wcad-more-options__swatches {
        transition: none;
    }
}