import { css } from "styled-components";
import { tokens, classes } from "../../Button.tokens";
export const base = css([
    `--box-shadow-spread:var(`,
    `,0.063rem);color:var(`,
    `);background:var(`,
    `);box-shadow:inset 0 0 0 var(--box-shadow-spread) var(`,
    `,inset 0 0 0 0 transparent);&.`,
    `{background:var(`,
    `);}@media (hover:hover) and (pointer:fine){:hover{color:var(`,
    `,var(`,
    `));background:var(`,
    `,var(`,
    `));box-shadow:inset 0 0 0 var(--box-shadow-spread) var(`,
    `,inset 0 0 0 0 transparent);scale:var(`,
    `);}}:active{color:var(`,
    `,var(`,
    `));background:var(`,
    `,var(`,
    `));box-shadow:inset 0 0 0 var(--box-shadow-spread) var(`,
    `,inset 0 0 0 0 transparent);scale:var(`,
    `);}`
], tokens.buttonBorderWidth, tokens.buttonColor, tokens.buttonBackgroundColor, tokens.buttonBorderColor, classes.buttonLoading, tokens.buttonLoadingBackgroundColor, tokens.buttonColorHover, tokens.buttonColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColor, tokens.buttonBorderColorHover, tokens.buttonScaleHover, tokens.buttonColorActive, tokens.buttonColor, tokens.buttonBackgroundColorActive, tokens.buttonBackgroundColor, tokens.buttonBorderColorActive, tokens.buttonScaleActive); /// TODO: #714 tokens: optional / default / func toHover(color) => hoverColor ??
 /*
    { "optional": true, "value":  "--plasma-button-focus-color" }
    { "default": "#fc0", "value":  "--plasma-button-focus-color" }
*/ 
