.checkbox {
    display: inline-flex;
    position: relative;
    vertical-align: text-bottom;
}
.checkbox__control[type="checkbox"] {
    height: 18px;
    min-width: 18px;
    width: 18px;
}
.checkbox--large .checkbox__control[type="checkbox"] {
    height: 24px;
    min-width: 24px;
    width: 24px;
}
span.checkbox__icon {
    display: inline-flex;
    height: 18px;
    outline-offset: 1px;
}
.checkbox--large span.checkbox__icon {
    height: 24px;
}
span.checkbox__icon[hidden] {
    display: inline-flex;
}
svg.checkbox__checked {
    color: var(--checkbox-checked-color, var(--color-foreground-primary));
}
svg.checkbox__unchecked {
    color: var(--checkbox-unchecked-color, var(--color-foreground-primary));
}
input.checkbox__control[type="checkbox"] {
    font-size: 100%;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
}
.checkbox svg {
    display: inline-block;
    fill: currentColor;
    height: 18px;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0;
    vertical-align: middle;
    width: 18px;
}
.checkbox--large svg {
    height: 24px;
    width: 24px;
}
input.checkbox__control[type="checkbox"]
    + span.checkbox__icon
    svg.checkbox__checked {
    display: none;
}
input.checkbox__control[type="checkbox"]
    + span.checkbox__icon
    svg.checkbox__unchecked,
input.checkbox__control[type="checkbox"]:checked
    + span.checkbox__icon
    svg.checkbox__checked {
    display: inline-block;
}
input.checkbox__control[type="checkbox"]:checked
    + span.checkbox__icon
    svg.checkbox__unchecked {
    display: none;
}
input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
    opacity: 1;
}
input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon svg {
    fill: var(--checkbox-disabled-color, var(--color-foreground-disabled));
}
input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
    outline: 1px auto;
    outline-color: var(--checkbox-outline, var(--color-foreground-secondary));
    outline-offset: 2px;
}
input.checkbox__control[type="checkbox"]:focus:not(:focus-visible)
    + span.checkbox__icon {
    outline: none;
}