import styled, { css } from "styled-components";
import { checkboxTokens } from "../Checkbox";
import { applyEllipsis, applyNoUserSelect } from "../../mixins";
import { classes, tokens } from "./Radiobox.tokens";
// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
const mappingOverride = `
    ${checkboxTokens.labelFontFamily}: var(${tokens.labelFontFamily});
    ${checkboxTokens.labelFontSize}: var(${tokens.labelFontSize});
    ${checkboxTokens.labelFontStyle}: var(${tokens.labelFontStyle});
    ${checkboxTokens.labelFontWeight}: var(${tokens.labelFontWeight});
    ${checkboxTokens.labelLetterSpacing}: var(${tokens.labelLetterSpacing});
    ${checkboxTokens.labelLineHeight}: var(${tokens.labelLineHeight});
    ${checkboxTokens.descriptionMarginTop}: var(${tokens.descriptionMarginTop});
    ${checkboxTokens.descriptionFontFamily}: var(${tokens.descriptionFontFamily});
    ${checkboxTokens.descriptionFontSize}: var(${tokens.descriptionFontSize});
    ${checkboxTokens.descriptionFontStyle}: var(${tokens.descriptionFontStyle});
    ${checkboxTokens.descriptionFontWeight}: var(${tokens.descriptionFontWeight});
    ${checkboxTokens.descriptionLetterSpacing}: var(${tokens.descriptionLetterSpacing});
    ${checkboxTokens.descriptionLineHeight}: var(${tokens.descriptionLineHeight});

    ${checkboxTokens.fillColor}: var(${tokens.fillColor});
    ${checkboxTokens.labelColor}: var(${tokens.labelColor});
    ${checkboxTokens.descriptionColor}: var(${tokens.descriptionColor});
    ${checkboxTokens.triggerBorderWidth}: var(${tokens.triggerBorderWidth});
    ${checkboxTokens.triggerBorderColor}: var(${tokens.triggerBorderColor});
    ${checkboxTokens.triggerBorderCheckedColor}: var(${tokens.triggerBorderCheckedColor});
    ${checkboxTokens.triggerBackgroundColor}: var(${tokens.triggerBackgroundColor});

    ${checkboxTokens.contentTopOffset}: var(${tokens.contentTopOffset});
    ${checkboxTokens.contentLeftOffset}: var(${tokens.contentLeftOffset});
    ${checkboxTokens.triggerSize}: var(${tokens.triggerSize});
    ${checkboxTokens.triggerBorderRadius}: var(${tokens.triggerBorderRadius});
    ${checkboxTokens.triggerPadding}: var(${tokens.triggerPadding});
`;
export const StyledEllipse = styled.div.withConfig({
    displayName: "Radiobox.styles__StyledEllipse",
    componentId: "sc-93902a85-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 const base = css([
    ``,
    `;margin:var(`,
    `);`,
    `;position:relative;align-items:flex-start;display:flex;.`,
    `{`,
    `;}`
], mappingOverride, tokens.margin, applyNoUserSelect(), classes.singleLine, applyEllipsis());
