.bricks-variation-swatches {
    --lw-out-color: var(--at-neutral-l-2);
}
/* Label swatches */
.bricks-variation-swatches:not(.bricks-swatch-image) li[data-lw-out="1"] {
    position: relative;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.bricks-variation-swatches:not(.bricks-swatch-image) li[data-lw-out="1"]::after {
    content: '';
    position: absolute;
    top: -3.5px;
    left: -3.5px;
    right: -3.5px;
    bottom: -3.5px;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px),
        var(--lw-out-color) calc(50% - 1px),
        var(--lw-out-color) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    pointer-events: none;
}
/* Image swatches */
.bricks-variation-swatches.bricks-swatch-image li[data-lw-out="1"] {
    position: relative;
}
.bricks-variation-swatches.bricks-swatch-image li[data-lw-out="1"] img {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.bricks-variation-swatches.bricks-swatch-image li .lw-out-line {
    position: absolute;
    top: -3.5px;
    left: -3.5px;
    right: -3.5px;
    bottom: -3.5px;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px),
        var(--lw-out-color) calc(50% - 1px),
        var(--lw-out-color) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.bricks-variation-swatches.bricks-swatch-image li[data-lw-out="1"] .lw-out-line {
    opacity: 1;
}