@use 'sass:map';
@use '@tokens' as tokens;
@use '../../settings/dictionaries';

$typography: tokens.$body-small-semibold;
$typography-large: tokens.$body-medium-semibold;
$border-width: tokens.$border-width-100;
$border-style: solid;
$border-radius: tokens.$radius-full;
$breakpoints: tokens.$breakpoints;

$disabled-color: tokens.$disabled-content;
$disabled-border-color: tokens.$disabled-border;
$disabled-background-color: tokens.$disabled-background;

$color-component-button-dictionary: (
    component-button: map.keys(map.get(tokens.$component-colors, button)),
);

$color-emotion-dictionary: (
    emotion: dictionaries.$emotion-colors,
);

$color-action-button-dictionary-config: (
    color: 'content',
    border-color: 'border',
    background-color: 'state-default',
    background-color-state-hover: 'state-hover',
    background-color-state-active: 'state-active',
);

$color-emotion-dictionary-config: (
    color: 'content-subtle',
    border-color: 'border-basic',
    background-color: 'state-default',
    background-color-state-hover: 'state-hover',
    background-color-state-active: 'state-active',
);

$loading-color-dictionary-config: (
    color: 'content',
);

$loading-color-dictionary-overrides: (
    emotion: (
        color: 'content-subtle',
        border-color: 'border-basic',
    ),
);

// We subtract the border width to achieve the same dimensions as other form elements
$sizes: (
    small: (
        height: 32px,
        padding-x: calc(#{tokens.$space-700} - #{tokens.$border-width-100}),
        padding-y: calc(#{tokens.$space-300} - #{tokens.$border-width-100}),
        typography: $typography,
    ),
    medium: (
        height: 40px,
        padding-x: calc(#{tokens.$space-900} - #{tokens.$border-width-100}),
        padding-y: calc(#{tokens.$space-500} - #{tokens.$border-width-100}),
        typography: $typography,
    ),
    large: (
        height: 48px,
        padding-x: calc(#{tokens.$space-900} - #{tokens.$border-width-100}),
        padding-y: calc(#{tokens.$space-500} - #{tokens.$border-width-100}),
        typography: $typography-large,
    ),
);
