import { css } from "styled-components";
import { addFocus } from "../../../../mixins";
import { classes, tokens } from "../../Checkbox.tokens";
/**
 * INFO: на 36 строке нет возможности использвать .${classes.checkboxTrigger},
 * потому что линтер правит селектор и он применяется некорректно
 */ export var base = css([
    ".",
    "{",
    "}input[data-focus-visible-added] + label .",
    "{border-color:transparent;",
    "}input[data-focus-visible-added]:checked + label .checkbox-trigger,input[type='checkbox'][data-focus-visible-added]:indeterminate + label .",
    "{",
    "}"
], classes.checkboxTrigger, addFocus({
    outlineOffset: '0',
    outlineSize: '0.125rem',
    outlineRadius: "var(".concat(tokens.triggerBorderRadius, ")"),
    outlineColor: 'transparent'
}), classes.checkboxTrigger, addFocus({
    outlineOffset: '-0.125rem',
    outlineSize: '0.125rem',
    outlineRadius: "var(".concat(tokens.triggerBorderRadius, ")"),
    outlineColor: "var(".concat(tokens.focusColor, ")"),
    customFocusRules: "\n                &::before {\n                    box-shadow: 0 0 0 0.125rem var(".concat(tokens.focusColor, ");\n                }\n            ")
}), classes.checkboxTrigger, addFocus({
    outlineOffset: '-0.25rem',
    outlineSize: '0.063rem',
    outlineRadius: "calc(var(".concat(tokens.triggerBorderRadius, ") + 0.125rem)"),
    outlineColor: "var(".concat(tokens.focusColor, ")"),
    customFocusRules: "\n                &::before {\n                    box-shadow: 0 0 0 0.063rem var(".concat(tokens.focusColor, ");\n                }\n            ")
}));
