import styled from "styled-components";
import { css } from "styled-components";
import { checkboxTokens } from "../Checkbox";
import { applyEllipsis, applyNoUserSelect } from "../../mixins";
import { classes, tokens } from "./Radiobox.tokens";
// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
var mappingOverride = "\n    ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n    ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n    ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n    ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n    ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n    ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n    ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n    ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n    ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n    ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n    ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n    ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n    ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n    ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n    ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n    ").concat(checkboxTokens.triggerBorderWidth, ": var(").concat(tokens.triggerBorderWidth, ");\n    ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n    ").concat(checkboxTokens.triggerBorderCheckedColor, ": var(").concat(tokens.triggerBorderCheckedColor, ");\n    ").concat(checkboxTokens.triggerBackgroundColor, ": var(").concat(tokens.triggerBackgroundColor, ");\n\n    ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n    ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n    ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n    ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n    ").concat(checkboxTokens.triggerPadding, ": var(").concat(tokens.triggerPadding, ");\n");
export var StyledEllipse = styled.div.withConfig({
    displayName: "Radiobox.styles__StyledEllipse",
    componentId: "sc-fb115d12-0"
})([
    "width:var(",
    ");height:var(",
    ");border-radius:var(",
    ");background-color:var(",
    ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"
], tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseColor);
export var base = css([
    "",
    ";margin:var(",
    ");",
    ";position:relative;align-items:flex-start;display:flex;.",
    "{",
    ";}"
], mappingOverride, tokens.margin, applyNoUserSelect(), classes.singleLine, applyEllipsis());
