import { css } from "styled-components";
import { addFocus } from "../../../../mixins";
import { classes, tokens } from "../../Checkbox.tokens";
/**
 * INFO: на 36 строке нет возможности использвать .${classes.checkboxTrigger},
 * потому что линтер правит селектор и он применяется некорректно
 */ export const 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.125rem',
    outlineSize: '0.125rem',
    outlineRadius: `var(${tokens.triggerBorderRadius})`,
    outlineColor: 'transparent'
}), classes.checkboxTrigger, addFocus({
    outlineOffset: '0.125rem',
    outlineSize: '0.125rem',
    outlineRadius: `calc(var(${tokens.triggerBorderRadius}) - 0.125rem)`,
    outlineColor: `var(${tokens.focusColor})`,
    customFocusRules: `
                &::before {
                    outline-color: var(${tokens.focusColor});
                }
            `
}), classes.checkboxTrigger, addFocus({
    outlineOffset: '0.25rem',
    outlineSize: '0.063rem',
    outlineRadius: `calc(var(${tokens.triggerBorderRadius}) - 0.125rem)`,
    outlineColor: `var(${tokens.focusColor})`,
    customFocusRules: `
                &::before {
                    outline-color: var(${tokens.focusColor});
                }
            `
}));
