/* ==========================================================================
   A product attribute's icon beside a chosen value that is neither a colour nor a pattern
   (Nop.Web.Infrastructure.ProductAttributeIcons: chosen on the attribute's admin page, else guessed
   from its name; the files are this folder's SVGs).

   The cart page draws it as an <img> of its own (.tc-oc-item__icon on a phone, .tc-cd-item__icon on a
   wide screen). The cart over-page and the desktop flyout get it as the variation's picture - QSM
   redraws the flyout from the cart's JSON with its pattern prototype - so there the pattern's thumbnail
   is turned back into a plain icon by its file's address.
   ========================================================================== */

.tc-oc-item__icon,
.tc-cd-item__icon {
    display: block;
    flex: none;
    object-fit: contain;
}

.tc-oc-item__icon {
    width: 16px;
    height: 16px;
}

.tc-cd-item__icon {
    width: 18px;
    height: 18px;
}

html body :is(.tc-oc-item__swatch--pattern, .rh-fc .rh-fc-item__swatch--pattern):has(> img[src*="/attribute-icons/"]) {
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

html body :is(.tc-oc-item__swatch--pattern, .rh-fc .rh-fc-item__swatch--pattern) > img[src*="/attribute-icons/"] {
    object-fit: contain;
}

/* the attribute's name beside its icon, for a screen reader only */
.tc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}