// 1. Clip the loading spinner to fix button flickering during spinner animation.

@use 'sass:map';
@use 'theme';
@use '@tokens' as tokens;
@use '../../settings/cursors';
@use '../../tools/dictionaries';
@use '../../tools/typography';

.Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--#{tokens.$css-variable-prefix}button-height);
    padding-inline: var(--#{tokens.$css-variable-prefix}button-padding-x);
    padding-block: var(--#{tokens.$css-variable-prefix}button-padding-y);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    color: var(--#{tokens.$css-variable-prefix}button-color);
    border-width: theme.$border-width;
    border-style: theme.$border-style;
    border-color: var(--#{tokens.$css-variable-prefix}button-border-color);
    border-radius: theme.$border-radius;
    background-color: var(--#{tokens.$css-variable-prefix}button-background-color);
    user-select: none;
    cursor: cursors.$buttons;

    &:hover,
    &:active,
    &:focus {
        text-decoration: none;
        color: var(--#{tokens.$css-variable-prefix}button-color);
    }

    &:hover {
        background-color: var(--#{tokens.$css-variable-prefix}button-background-color-state-hover);
    }

    &:active {
        background-color: var(--#{tokens.$css-variable-prefix}button-background-color-state-active);
    }

    &:is(:disabled, .is-disabled, .Button--disabled) {
        pointer-events: none;
        cursor: cursors.$disabled;
    }
}

@include dictionaries.generate-colors(
    $class-name: 'Button',
    $dictionary-values: theme.$color-component-button-dictionary,
    $config: theme.$color-action-button-dictionary-config
);
@include dictionaries.generate-colors(
    $class-name: 'Button',
    $dictionary-values: theme.$color-emotion-dictionary,
    $config: theme.$color-emotion-dictionary-config
);
@include dictionaries.generate-sizes('Button', theme.$sizes);

.Button--block {
    display: block;
    width: 100%;
}

.Button--symmetrical {
    flex: none;
    aspect-ratio: 1;
    padding-inline: 0;
}

.Button:is(:disabled, .is-disabled, .Button--disabled):not(.Button--loading) {
    color: theme.$disabled-color;
    border-color: theme.$disabled-border-color;
    background-color: theme.$disabled-background-color;
}

// We need to override the default disabled styles for plain buttons, because we want them to be still plain.
.Button--plain:is(:disabled, .is-disabled, .Button--disabled):not(.Button--loading) {
    border-color: transparent;
    background-color: transparent;
}

.Button.Button--loading {
    position: relative;
    overflow: hidden; // 1.
    color: transparent;

    &:hover,
    &:focus,
    &:active {
        color: transparent;
    }
}

.Button--loading > svg:last-child {
    --animation-spin-translate: -50%, -50%;

    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--#{tokens.$css-variable-prefix}button-color);
    transform: translate(-50%, -50%);
}
