@use 'theme';
@use '@tokens' as tokens;
@use '../../tools/dictionaries';
@use '../../tools/typography';

.Alert {
    @include typography.generate(theme.$typography);

    display: grid;
    grid-template-columns: auto auto;
    gap: theme.$gap;
    justify-content: flex-start;
    width: 100%;
    padding: theme.$padding;
    color: var(--#{tokens.$css-variable-prefix}alert-color);
    border-width: theme.$border-width;
    border-style: theme.$border-style;
    border-color: var(--#{tokens.$css-variable-prefix}alert-border-color);
    border-radius: theme.$border-radius;
    background-color: var(--#{tokens.$css-variable-prefix}alert-background-color);
}

.Alert--center {
    grid-template-columns: auto fit-content(#{theme.$content-max-width});
    justify-content: center;
}

@include dictionaries.generate-colors(
    $class-name: 'Alert',
    $dictionary-values: theme.$color-dictionary,
    $config: theme.$color-dictionary-config
);

.Alert :where(a) {
    color: var(--#{tokens.$css-variable-prefix}alert-color);

    @media (hover: hover) {
        &:hover {
            color: var(--#{tokens.$css-variable-prefix}alert-color);
        }
    }

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