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

$alignments-x: (
    left: start,
    center: center,
    right: end,
);
$alignments-y: (
    top: start,
    bottom: end,
);
$breakpoints: tokens.$breakpoints;

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

$color-dictionary-config: (
    color: 'content-subtle',
    background-color: 'background-basic',
);

$padding-x: tokens.$space-900;
$padding-x-tablet: tokens.$space-1000;
$padding-x-desktop: tokens.$space-1100;
$padding-y: tokens.$space-900;

$queue-collapse-after: 3;
$queue-gap: tokens.$space-700;

$bar-typography: tokens.$body-small-bold;
$bar-max-width: 480px;
$bar-max-height: 200px; // Whatever larger than the largest toast message. ⚠️ CAUTION: Affects animation timing!
$bar-gap: tokens.$space-700;
$bar-padding: tokens.$space-700;
$bar-border-radius: tokens.$radius-300;
$bar-box-shadow: tokens.$shadow-400;
$bar-content-gap: tokens.$space-600;
$bar-message-gap-x: tokens.$space-900;
$bar-message-gap-y: tokens.$space-600;
$bar-action-margin-inline-end: tokens.$space-500;
$bar-close-padding: tokens.$space-300;

// ⚠️ Keep the slowest transition in sync with `js/Toast.ts`.
$bar-transition-delay-margin: transitions.$duration-300;
$bar-transition-duration-max-height: transitions.$duration-500;
$bar-transition-duration-margin: transitions.$duration-300;
$bar-transition-duration-opacity: transitions.$duration-400;
$bar-transition-duration-scale: transitions.$duration-300;
$bar-transition-timing-max-height: transitions.$timing-eased-in-out-fast;
$bar-transition-timing-margin: transitions.$timing-eased-in-out;
$bar-transition-timing-opacity: transitions.$timing-eased-out;
$bar-transition-timing-scale: transitions.$timing-eased-out;
$bar-box-transition-duration: transitions.$duration-200;
$bar-box-transition-timing: transitions.$timing-eased-out;
