import { createComponent } from '@graphprotocol/gds-css';
import { ButtonMeta } from "./Button.meta.js";
export const ToggleButtonMeta = createComponent('ToggleButton', {
    extends: ButtonMeta,
    cssProps: {
        variant: {
            type: 'values',
            values: ['secondary', 'tertiary', 'naked'],
            defaultValue: 'secondary',
        },
    },
    vars: {
        fg: {
            '@variant @state-checked/button': {
                '@variant @prop-variant-naked/button': {
                    '@variant @state-idle/button': 'var(--text-color-button-naked-toggled-idle)',
                    '@variant @state-hover/button': 'var(--text-color-button-naked-toggled-hover)',
                    '@variant @state-active/button': 'var(--text-color-button-naked-toggled-active)',
                },
            },
        },
        bg: {
            '@variant @state-checked/button': {
                '@variant @prop-variant-secondary/button': {
                    '@variant @state-idle/button': 'var(--background-color-button-secondary-toggled-idle)',
                    '@variant @state-hover/button': 'var(--background-color-button-secondary-toggled-hover)',
                    '@variant @state-active/button': 'var(--background-color-button-secondary-toggled-active)',
                    '@variant @state-disabled/button': 'var(--background-color-button-secondary-toggled-disabled)',
                },
                '@variant @prop-variant-tertiary/button': {
                    '@variant @state-idle/button': 'var(--background-color-button-tertiary-toggled-idle)',
                    '@variant @state-hover/button': 'var(--background-color-button-tertiary-toggled-hover)',
                    '@variant @state-active/button': 'var(--background-color-button-tertiary-toggled-active)',
                    '@variant @state-disabled/button': 'var(--background-color-button-tertiary-toggled-disabled)',
                },
            },
        },
        border: {
            '@variant @state-checked/button': {
                '@variant @prop-variant-secondary/button': {
                    '@variant @state-idle/button': 'var(--border-color-button-secondary-toggled-idle)',
                    '@variant @state-hover/button': 'var(--border-color-button-secondary-toggled-hover)',
                    '@variant @state-active/button': 'var(--border-color-button-secondary-toggled-active)',
                    '@variant @state-disabled/button': 'var(--border-color-button-secondary-toggled-disabled)',
                },
                '@variant @prop-variant-tertiary/button': {
                    '@variant @state-idle/button': 'var(--border-color-button-tertiary-toggled-idle)',
                    '@variant @state-hover/button': 'var(--border-color-button-tertiary-toggled-hover)',
                    '@variant @state-active/button': 'var(--border-color-button-tertiary-toggled-active)',
                    '@variant @state-disabled/button': 'var(--border-color-button-tertiary-toggled-disabled)',
                },
            },
        },
    },
});
//# sourceMappingURL=ToggleButton.meta.js.map