.variant-picker {
width: 100%;
}
.variant-picker__form {
width: 100%;
}
.variant-picker[data-shopify-visual-preview] {
min-width: 300px;
padding-inline-start: max(4px, var(--padding-inline-start));
}
.variant-option__select-wrapper {
display: flex;
position: relative;
border: var(--style-border-width-inputs) solid var(--color-variant-border);
border-radius: var(--style-border-radius-inputs);
align-items: center;
margin-top: var(--margin-2xs);
overflow: clip;
color: var(--color-variant-text);
}
.variant-option__select-wrapper:has(.swatch) {
--variant-picker-swatch-width: 20px;
--variant-picker-swatch-height: 20px;
}
.variant-option__select-wrapper:hover {
border-color: var(--color-variant-hover-border);
color: var(--color-variant-hover-text);
}
.variant-option__select-wrapper:hover .variant-option__select {
background-color: var(--color-variant-hover-background);
}
.variant-option__select:focus-visible {
outline: var(--focus-outline-width) solid currentcolor;
outline-offset: var(--focus-outline-offset);
}
.variant-option__select {
padding-block: var(--padding-md);
padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
appearance: none;
background-color: var(--color-variant-background);
color: inherit;
border: 0;
width: 100%;
margin: 0;
cursor: pointer;
}
.variant-option__select-wrapper .icon {
position: absolute;
right: var(--padding-md);
top: 50%;
transform: translateY(-50%);
width: var(--icon-size-2xs);
height: var(--icon-size-2xs);
pointer-events: none;
}
.variant-option__select--has-swatch {
padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
}
.variant-option__select-wrapper .swatch {
position: absolute;
top: 50%;
left: var(--padding-md);
transform: translateY(-50%);
}
.variant-picker--center,
.variant-picker--center .variant-option {
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
.variant-picker--right,
.variant-picker--right .variant-option {
text-align: right;
justify-content: right;
}
.variant-picker .variant-option--buttons label:has(.swatch) {
border-radius: var(--variant-picker-swatch-radius);
}
.variant-option {
--options-border-radius: var(--variant-picker-button-radius);
--options-border-width: var(--variant-picker-button-border-width);
--variant-option-padding-inline: var(--padding-md);
}
.variant-option + .variant-option {
margin-top: var(--padding-lg);
}
.variant-option--swatches {
--options-border-radius: var(--variant-picker-swatch-radius);
width: 100%;
overflow-list::part(list) {
padding-block: var(--overflow-list-padding-block, 0);
padding-inline: var(--overflow-list-padding-inline, 0);
}
}
.variant-option--swatches > overflow-list {
justify-content: var(--product-swatches-alignment);
@media screen and (max-width: 749px) {
justify-content: var(--product-swatches-alignment-mobile);
}
}
.variant-option--buttons {
display: flex;
flex-wrap: wrap;
gap: var(--gap-sm);
margin: 0;
padding: 0;
border: none;
}
.variant-option--buttons legend {
padding: 0;
margin-block-end: var(--margin-xs);
}
.variant-option--buttons legend,
.variant-option--dropdowns > label,
.variant-option[data-testid='variant-option-single'] {
color: var(--variant-option-label-color, var(--color-foreground));
}
.variant-option__swatch-value {
padding-inline-start: var(--padding-xs);
color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
}
@media (prefers-reduced-motion: no-preference) {
.variant-option__button-label,
.variant-option__select-wrapper,
.variant-option__button-label::before,
.variant-option__button-label::after,
.variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
.variant-option__button-label__pill {
transition-duration: var(--animation-speed);
transition-timing-function: var(--animation-easing);
}
.variant-option__button-label__pill {
transition-property: transform;
}
.variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
.variant-option__button-label__pill {
transition-property: transform;
}
.variant-option__button-label::after {
transition-property: clip-path;
}
.variant-option__button-label::before {
transition-property: border-color;
}
.variant-option__select-wrapper,
.variant-option__button-label {
transition-property: background-color, border-color, color;
}
}
.variant-option__button-label {
--variant-picker-stroke-color: var(--color-variant-border);
cursor: pointer;
display: flex;
flex: 0 0 3.25em;
align-items: center;
position: relative;
padding-block: var(--padding-sm);
padding-inline: var(--padding-lg);
border: var(--options-border-width) solid var(--color-variant-border);
border-radius: var(--options-border-radius);
overflow: clip;
justify-content: center;
min-height: 3.25em;
min-width: fit-content;
white-space: nowrap;
background-color: var(--color-variant-background);
color: var(--color-variant-text);
gap: 0;
&:hover,
&:hover:has([aria-disabled='true']):has([data-option-available='false']) {
--variant-picker-stroke-color: var(--color-variant-hover-border);
background-color: var(--color-variant-hover-background);
border-color: var(--color-variant-hover-border);
color: var(--color-variant-hover-text);
}
&:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
border-width: 0;
}
&:not(.variant-option__button-label--has-swatch)::before,
&:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
content: '';
position: absolute;
inset: 0;
border: var(--options-border-width) solid var(--color-selected-variant-border);
border-radius: inherit;
pointer-events: none;
z-index: 2;
clip-path: inset(var(--clip, 0 0 0 0));
}
&:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
inset: 0;
}
&:not(.variant-option__button-label--has-swatch)::before {
clip-path: inset(0 0 0 0);
border-color: var(--color-variant-border);
inset: calc(var(--options-border-width) * -1);
}
&:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
border-color: var(--color-selected-variant-border);
}
&:not(:has(:checked)):has(~ label > :checked),
&:has(:checked):has(~ label > [data-previous-checked='true']) {
.variant-option__button-label__pill {
right: 0;
left: unset;
}
}
&:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
&:has(:checked) ~ label {
.variant-option__button-label__pill {
left: 0;
right: unset;
}
}
&:not(:has(:checked)):has(~ label > :checked) {
--pill-offset: calc(100% + 1px);
}
&:has(:checked) ~ label {
--pill-offset: calc(-100% - 1px);
}
&:has([data-current-checked='true']):first-of-type
~ label:last-of-type:not(.variant-option__button-label--has-swatch),
&:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
--clip: 0 0 0 100%;
}
&:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
.variant-option__button-label--has-swatch
),
&:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
--clip: 0 100% 0 0;
}
&:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
}
@media screen and (min-width: 750px) {
padding: var(--padding-xs) var(--variant-option-padding-inline);
}
}
.variant-option--buttons:has(:nth-of-type(3)) {
.variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
--pill-offset: calc(100% + 1px);
}
.variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
~ label:last-of-type > :checked
) {
--pill-offset: calc(-100% - 1px);
}
}
.variant-option__button-label__pill {
background: var(--color-selected-variant-background);
position: absolute;
top: calc(var(--options-border-width) * -1);
bottom: calc(var(--options-border-width) * -1);
border-radius: inherit;
pointer-events: none;
width: 100%;
transform: translateX(var(--pill-offset, 0));
}
.variant-option__button-label__text {
pointer-events: none;
text-align: start;
text-wrap: auto;
z-index: 2;
}
.variant-option--equal-width-buttons {
--variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));
.variant-option__button-label {
min-width: var(--variant-min-width);
}
.variant-option__button-label__text {
text-align: center;
text-wrap: balance;
}
}
.variant-option__button-label:has(:focus-visible) {
--variant-picker-stroke-color: var(--color-foreground);
border-color: var(--color-foreground);
outline: var(--focus-outline-width) solid var(--color-foreground);
outline-offset: var(--focus-outline-offset);
}
.variant-option__button-label--has-swatch {
--focus-outline-radius: var(--variant-picker-swatch-radius);
padding: 0;
border: none;
flex-basis: auto;
min-height: auto;
}
.variant-option__button-label:has(:checked) {
--variant-picker-stroke-color: var(--color-selected-variant-border);
color: var(--color-selected-variant-text);
border-color: var(--color-selected-variant-border);
}
.variant-option__button-label:has(:checked):hover {
border-color: var(--color-selected-variant-hover-border);
color: var(--color-selected-variant-hover-text);
.variant-option__button-label__pill {
background-color: var(--color-selected-variant-hover-background);
}
}
.variant-option__button-label:has([data-option-available='false']) {
color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
}
.variant-option__button-label--has-swatch:hover {
outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
outline-offset: var(--focus-outline-offset);
}
.variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
.variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
}
.variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
stroke: none;
}
.variant-option__button-label--has-swatch:has(:checked) {
--focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
@supports not (background-color: rgb(from red 150 g b / alpha)) {
.variant-option__button-label--has-swatch:has(:checked),
.variant-option__button-label:has(:focus-visible) .swatch {
outline: none;
position: relative;
overflow: visible;
}
.variant-option__button-label--has-swatch:has(:checked)::after,
.variant-option__button-label:has(:focus-visible) .swatch::after {
content: '';
position: absolute;
inset: calc(-1 * var(--focus-outline-offset));
border: var(--focus-outline);
border-radius: var(--focus-outline-radius, 50%);
background-color: transparent;
display: inherit;
}
}
.variant-option__button-label:has([data-option-available='false']):has(:checked) {
--variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
background-color: var(--color-selected-variant-background);
color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
}
.variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
background-color: var(--color-selected-variant-hover-background);
color: var(--color-selected-variant-hover-text);
}
.variant-option__button-label input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
aspect-ratio: unset;
border: none;
border-radius: 0;
background: transparent;
appearance: auto;
display: block;
cursor: pointer;
}
.variant-option__button-label svg {
position: absolute;
left: var(--options-border-width);
top: var(--options-border-width);
height: calc(100% - (var(--options-border-width) * 2));
width: calc(100% - (var(--options-border-width) * 2));
cursor: pointer;
pointer-events: none;
stroke-width: var(--style-border-width);
stroke: var(--variant-picker-stroke-color);
}
.variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));
line {
stroke-width: var(--options-border-width);
}
line:last-of-type {
stroke: none;
}
}
.variant-option__button-label--has-swatch:has(input[type='radio']) {
display: block;
}
.variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
.variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
background-color: inherit;
}