/**
 * Variation Availability — disabled-with-X overlay for unreachable size/color
 * combinations. Targets the woo-variation-swatches plugin DOM
 * (.variable-items-wrapper .variable-item) and falls back gracefully on
 * other swatch DOMs and native <select> options.
 */

/* Native <select> options — strike through disabled values when dropdown is open */
select option.em-unavailable,
select option:disabled {
    color: #aaa;
    text-decoration: line-through;
}

/* Plugin swatches that we marked unavailable */
.variable-items-wrapper .variable-item.em-unavailable,
li.variable-item.em-unavailable,
.em-unavailable {
    position: relative !important;
    opacity: 0.45 !important;
    filter: grayscale(0.7);
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.em-unavailable * {
    pointer-events: none !important;
}

/* The big X overlay — drawn with two diagonal pseudo-element gradients */
.variable-items-wrapper .variable-item.em-unavailable::after,
li.variable-item.em-unavailable::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1.5px),
            rgba(190, 24, 24, 0.85) calc(50% - 1.5px),
            rgba(190, 24, 24, 0.85) calc(50% + 1.5px),
            transparent calc(50% + 1.5px)
        ),
        linear-gradient(to top left,
            transparent calc(50% - 1.5px),
            rgba(190, 24, 24, 0.85) calc(50% - 1.5px),
            rgba(190, 24, 24, 0.85) calc(50% + 1.5px),
            transparent calc(50% + 1.5px)
        );
}

/* Color swatches are circular, so let the X follow the rounded shape */
.variable-items-wrapper.color-variable-items-wrapper .variable-item.em-unavailable::after {
    border-radius: 50%;
}

/* Mobile — keep the X visible on small swatches */
@media (max-width: 640px) {
    .variable-items-wrapper .variable-item.em-unavailable::after,
    li.variable-item.em-unavailable::after {
        background:
            linear-gradient(to top right,
                transparent calc(50% - 1.25px),
                rgba(190, 24, 24, 0.9) calc(50% - 1.25px),
                rgba(190, 24, 24, 0.9) calc(50% + 1.25px),
                transparent calc(50% + 1.25px)
            ),
            linear-gradient(to top left,
                transparent calc(50% - 1.25px),
                rgba(190, 24, 24, 0.9) calc(50% - 1.25px),
                rgba(190, 24, 24, 0.9) calc(50% + 1.25px),
                transparent calc(50% + 1.25px)
            );
    }
}