import styled, { css } from "styled-components";
import { applyEllipsis, applyNoUserSelect } from "../../mixins";
import { classes, tokens } from "./Checkbox.tokens";
export const base = css([
    `margin:var(`,
    `);`,
    `;position:relative;align-items:flex-start;display:flex;.`,
    `{`,
    `;}`
], tokens.margin, applyNoUserSelect(), classes.singleLine, applyEllipsis());
export const StyledInput = styled.input.withConfig({
    displayName: "Checkbox.styles__StyledInput",
    componentId: "sc-a2f816e1-0"
})([
    `position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);`
]);
export const StyledTriggerWrapper = styled.div.withConfig({
    displayName: "Checkbox.styles__StyledTriggerWrapper",
    componentId: "sc-a2f816e1-1"
})([
    `padding:var(`,
    `);`
], tokens.triggerPadding);
export const StyledTrigger = styled.div.withConfig({
    displayName: "Checkbox.styles__StyledTrigger",
    componentId: "sc-a2f816e1-2"
})([
    `width:var(`,
    `);height:var(`,
    `);border-radius:var(`,
    `);position:relative;display:flex;align-items:center;justify-content:center;background:var(`,
    `);border:var(`,
    `) solid var(`,
    `);box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}`
], tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBackgroundColor, tokens.triggerBorderWidth, tokens.triggerBorderColor);
export const StyledContentWrapper = styled.label.withConfig({
    displayName: "Checkbox.styles__StyledContentWrapper",
    componentId: "sc-a2f816e1-3"
})([
    `position:relative;align-items:flex-start;display:flex;width:inherit;cursor:pointer;.`,
    `{width:100%;}`
], classes.singleLine);
export const StyledContent = styled.div.withConfig({
    displayName: "Checkbox.styles__StyledContent",
    componentId: "sc-a2f816e1-4"
})([
    `display:flex;flex-direction:column;margin-top:var(`,
    `);margin-left:var(`,
    `);`
], tokens.contentTopOffset, tokens.contentLeftOffset);
export const StyledLabel = styled.span.withConfig({
    displayName: "Checkbox.styles__StyledLabel",
    componentId: "sc-a2f816e1-5"
})([
    `color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.labelColor, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight);
export const StyledDescription = styled.div.withConfig({
    displayName: "Checkbox.styles__StyledDescription",
    componentId: "sc-a2f816e1-6"
})([
    `margin-top:var(`,
    `);color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);&.`,
    `{margin-top:0;}`
], tokens.descriptionMarginTop, tokens.descriptionColor, tokens.descriptionFontFamily, tokens.descriptionFontSize, tokens.descriptionFontStyle, tokens.descriptionFontWeight, tokens.descriptionLetterSpacing, tokens.descriptionLineHeight, classes.onlyDescription);
