@spectrum-css/checkbox
Version:
The Spectrum CSS checkbox component
354 lines (352 loc) • 23 kB
CSS
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
.spectrum-Checkbox {
--spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
--spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
--spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
--spectrum-checkbox-checkmark-color: var(--spectrum-gray-50);
--spectrum-checkbox-control-corner-radius: 2px;
--spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover);
--spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down);
--spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
--spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color);
--spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color);
--spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
--spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
--spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
--spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100);
--spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000);
--spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900);
--spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000);
--spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100);
--spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000);
--spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default);
--spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover);
--spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down);
--spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
--spectrum-checkbox-line-height: var(--spectrum-line-height-100);
--spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100);
--spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
--spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
--spectrum-checkbox-border-width: var(--spectrum-border-width-200);
--spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2);
--spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100);
}
.spectrum-Checkbox,
.spectrum-Checkbox--sizeM {
--spectrum-checkbox-font-size: var(--spectrum-font-size-100);
--spectrum-checkbox-height: var(--spectrum-component-height-100);
--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium);
--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
}
.spectrum-Checkbox--sizeS {
--spectrum-checkbox-font-size: var(--spectrum-font-size-75);
--spectrum-checkbox-height: var(--spectrum-component-height-75);
--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small);
--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75);
--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75);
}
.spectrum-Checkbox--sizeL {
--spectrum-checkbox-font-size: var(--spectrum-font-size-200);
--spectrum-checkbox-height: var(--spectrum-component-height-200);
--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large);
--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200);
--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200);
}
.spectrum-Checkbox--sizeXL {
--spectrum-checkbox-font-size: var(--spectrum-font-size-300);
--spectrum-checkbox-height: var(--spectrum-component-height-300);
--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large);
--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300);
--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300);
}
.spectrum-Checkbox {
color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)));
display: inline-flex;
align-items: flex-start;
position: relative;
min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height));
max-inline-size: 100%;
vertical-align: top;
}
.spectrum-Checkbox:active .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down)));
}
.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down)));
}
.spectrum-Checkbox:active .spectrum-Checkbox-label {
color: var(--highcontrast-checkbox-content-color-down, var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down)));
}
.spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before,
.spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default)));
}
.spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before,
.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
}
.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input {
cursor: default;
}
.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before,
.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));
background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
}
.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label,
.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label {
color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)));
}
.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before,
.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));
border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width));
}
.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark,
.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark {
display: none;
}
.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark,
.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark {
display: block;
transform: scale(1);
opacity: 1;
}
.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus)));
}
.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before,
.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default)));
border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width));
}
.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-default, var(--spectrum-checkbox-emphasized-color-default)));
}
.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-emphasized-color-focus, var(--spectrum-checkbox-emphasized-color-focus)));
}
.spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-focus, var(--spectrum-checkbox-invalid-color-focus)));
}
@media (hover: hover) {
.spectrum-Checkbox:hover .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover)));
}
.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover)));
}
.spectrum-Checkbox:hover .spectrum-Checkbox-label {
color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover)));
}
.spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before,
.spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
}
.spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before,
.spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover)));
}
.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before,
.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
}
.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label {
color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover)));
}
.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover)));
}
.spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
}
.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover)));
}
}
.spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-down, var(--spectrum-checkbox-emphasized-color-down)));
}
.spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-invalid-color-down, var(--spectrum-checkbox-invalid-color-down)));
}
.spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before,
.spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus)));
}
.spectrum-Checkbox-label {
text-align: start;
margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control));
margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text));
font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size));
transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out;
line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height));
}
.spectrum-Checkbox-label:lang(ja),
.spectrum-Checkbox-label:lang(ko),
.spectrum-Checkbox-label:lang(zh) {
line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk));
}
.spectrum-Checkbox-input {
color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default));
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
box-sizing: border-box;
padding: 0;
position: absolute;
inline-size: 100%;
block-size: 100%;
opacity: 0;
z-index: 1;
cursor: pointer;
}
.spectrum-Checkbox-input:disabled {
cursor: default;
}
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));
background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color));
border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width));
}
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark {
transform: scale(1);
opacity: 1;
}
.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus)));
}
.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after {
forced-color-adjust: none;
box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thinkness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)));
margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1);
}
.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label {
color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus)));
}
.spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus)));
}
.spectrum-Checkbox-box {
--spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0;
flex-grow: 0;
flex-shrink: 0;
}
.spectrum-Checkbox-box,
.spectrum-Checkbox-box:before {
box-sizing: border-box;
inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
}
.spectrum-Checkbox-box:before {
forced-color-adjust: none;
border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)));
display: block;
z-index: 0;
content: "";
position: absolute;
border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius));
border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width));
border-style: solid;
transition:
border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out,
box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out;
}
.spectrum-Checkbox-box:after {
border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)));
content: "";
display: block;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
inset-block-start: 0;
margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap));
transition:
box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out,
margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out;
transform: translate(0);
}
.spectrum-Checkbox .spectrum-Checkbox-checkmark,
.spectrum-Checkbox .spectrum-Checkbox-partialCheckmark {
color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
opacity: 0;
transform: scale(0);
transition:
opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out,
transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out;
}
.spectrum-Checkbox .spectrum-Checkbox-partialCheckmark {
display: none;
}
.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before,
.spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before {
border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled)));
background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)));
}
.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label,
.spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label {
forced-color-adjust: none;
color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled)));
}
@media (forced-colors: active) {
.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box {
forced-color-adjust: none;
outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)));
outline-style: auto;
outline-offset: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap));
outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
}
.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after {
box-shadow: 0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)));
}
.spectrum-Checkbox {
--highcontrast-checkbox-content-color-default: CanvasText;
--highcontrast-checkbox-content-color-hover: CanvasText;
--highcontrast-checkbox-content-color-down: CanvasText;
--highcontrast-checkbox-content-color-focus: CanvasText;
--highcontrast-checkbox-background-color-default: Canvas;
--highcontrast-checkbox-color-default: ButtonText;
--highcontrast-checkbox-color-hover: ButtonText;
--highcontrast-checkbox-color-focus: Highlight;
--highcontrast-checkbox-highlight-color-default: Highlight;
--highcontrast-checkbox-highlight-color-hover: Highlight;
--highcontrast-checkbox-highlight-color-down: Highlight;
--highcontrast-checkbox-highlight-color-focus: Highlight;
--highcontrast-checkbox-disabled-color-default: GrayText;
--highcontrast-checkbox-focus-indicator-color: CanvasText;
}
}