/*
 * Styles for the Variation Swatch Label Overlay
 */

/* The container for each swatch image needs to be a positioning reference */
.variable-items-wrapper .variable-item.image-variable-item .variable-item-contents {
    position: relative;
    overflow: hidden; /* Ensures the overlay corners are clipped if rounded */
}

/* The label overlay itself */
.variation-label-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* Style */
    background-color: rgba(0, 0, 0, 0.65); /* Semi-transparent black background */
    color: #ffffff;                       /* White text */
    padding: 4px 2px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    font-weight: 500;
    
    /* Behavior */
    pointer-events: none; /* This is important! It lets you click through the label to the image */
    box-sizing: border-box;

    /* Animation (Optional) */
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* --- Optional: Uncomment the code below to HIDE the label until you HOVER over the swatch --- */
/*
.variable-items-wrapper .variable-item.image-variable-item .variation-label-overlay {
    opacity: 0;
}

.variable-items-wrapper .variable-item.image-variable-item:hover .variation-label-overlay {
    opacity: 1;
}
*/