.f-list--named-swatch{--filter-swatch-size: 22px;--filter-swatch-gap: 10px;--filter-swatch-inset: 5px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:4px}.f-list--named-swatch .list__item{min-width:0}.f-list--named-swatch .form-checkbox{width:100%;min-width:0}.f-list--named-swatch .form-checkbox>.svg-icon--check{display:none}.f-list--named-swatch .list__item--swatch .form-checkbox__label{position:relative;display:inline-flex;align-items:center;gap:var(--filter-swatch-gap);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-start:var(--filter-swatch-inset);margin-inline-start:calc(var(--filter-swatch-inset) * -1)}.f-list--named-swatch .list__item--swatch .form-checkbox__label:before{content:"";flex:0 0 auto;width:var(--filter-swatch-size);height:var(--filter-swatch-size);border-radius:var(--border-radius, 0px);background:var(--filter-swatch, #dddddd);background-clip:padding-box;box-shadow:inset 0 0 0 1px #2d2d2d29;transition:box-shadow var(--duration-default, .2s) ease}.f-list--named-swatch .list__item--swatch .form-checkbox__label:after{content:"";position:absolute;top:50%;inset-inline-start:calc(var(--filter-swatch-inset) + var(--filter-swatch-size) / 2);width:5px;height:10px;border:2px solid #ffffff;border-top:0;border-inline-start:0;transform:translate(-50%,-60%) rotate(45deg) scale(0);transform-origin:center;mix-blend-mode:difference;transition:transform var(--duration-default, .2s) ease;pointer-events:none}.f-list--named-swatch .list__item--swatch .form-checkbox:hover .form-checkbox__label:before{box-shadow:inset 0 0 0 1px #2d2d2d52,0 0 0 3px #2d2d2d14}.f-list--named-swatch .list__item--swatch .form-checkbox__input:checked~.form-checkbox__label:before{box-shadow:inset 0 0 0 1px #2d2d2d52,0 0 0 2px var(--color-background, #ffffff),0 0 0 4px var(--color-text, #2d2d2d)}.f-list--named-swatch .list__item--swatch .form-checkbox__input:checked~.form-checkbox__label:after{transform:translate(-50%,-60%) rotate(45deg) scale(1)}.f-list--named-swatch .list__item--swatch .form-checkbox__input:checked~.form-checkbox__label{font-weight:600}.f-list--named-swatch .list__item--swatch .form-checkbox__input:focus-visible~.form-checkbox__label:before{outline:2px solid var(--color-text, #2d2d2d);outline-offset:3px}
/*# sourceMappingURL=/cdn/shop/t/14/assets/component-filter-swatch.css.map */