.swatch-input__input+.swatch-input__label {
    --swatch-input--border-radius: 50%;
    display: inline-block;
    max-width: 100%;
    border-radius: var(--swatch-input--border-radius);
    cursor: pointer;
    outline-offset: .2rem;
    outline-color: transparent;
    outline-style: solid;
    transition-property: outline-color, outline-width, box-shadow;
    transition-duration: var(--duration-short);
    transition-timing-function: ease;
    forced-color-adjust: none
}

.swatch-input__input+.swatch-input__label.swatch-input__label--square {
    --swatch-input--border-radius: .2rem
}

.swatch-input__input:active+.swatch-input__label,
.swatch-input__input:checked+.swatch-input__label {
    outline: .1rem solid rgb(var(--color-foreground))
}

.swatch-input__input+.swatch-input__label:hover,
.swatch-input__input:hover+.swatch-input__label {
    outline: .2rem solid rgba(var(--color-foreground), .4)
}

.swatch-input__input:focus-visible+.swatch-input__label {
    outline: .2rem solid rgba(var(--color-foreground), .5);
    box-shadow: 0 0 0 .2rem rgb(var(--color-background)), 0 0 .1rem .5rem rgba(var(--color-foreground), .25)
}

.swatch-input__input:active:focus-visible+.swatch-input__label,
.swatch-input__input:checked:focus-visible+.swatch-input__label {
    outline: .1rem solid rgb(var(--color-foreground));
    box-shadow: 0 0 0 .2rem rgb(var(--color-background)), 0 0 .1rem .4rem rgba(var(--color-foreground), .25)
}

.swatch-input__input.visually-disabled:not(:active):not(:checked)+.swatch-input__label {
    transition: none
}

.swatch-input__input.visually-disabled:not(:active):not(:checked)+.swatch-input__label:hover {
    outline: none
}

.swatch-input__input:disabled+.swatch-input__label {
    pointer-events: none
}

.swatch-input__input:disabled+.swatch-input__label>.swatch,
.swatch-input__input.visually-disabled+.swatch-input__label>.swatch {
    position: relative;
    overflow: hidden
}

.swatch-input__input:disabled+.swatch-input__label>.swatch,
.swatch-input__input.visually-disabled+.swatch-input__label>.swatch {
    opacity: .4
}

.swatch-input__input:disabled+.swatch-input__label>.swatch:after,
.swatch-input__input.visually-disabled+.swatch-input__label>.swatch:after {
    --diagonal--size: calc(var(--swatch-input--size) * 1.414);
    --crossed-line--size: .1rem;
    content: "";
    position: absolute;
    bottom: calc(var(--crossed-line--size) * -.5);
    left: 0;
    width: var(--diagonal--size);
    height: var(--crossed-line--size);
    background-color: rgb(var(--color-foreground));
    transform: rotate(-45deg);
    transform-origin: left
}

/*# sourceMappingURL=/cdn/shop/t/6/assets/component-swatch-input.css.map?v=61683592951238328641744294649 */