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

.Tag {
    display: inline-block;
    padding-inline: var(--#{tokens.$css-variable-prefix}tag-padding-x);
    padding-block: var(--#{tokens.$css-variable-prefix}tag-padding-y);
    text-align: center;
    color: var(--#{tokens.$css-variable-prefix}tag-color);
    border-width: theme.$border-width;
    border-style: theme.$border-style;
    border-color: var(--#{tokens.$css-variable-prefix}tag-border-color);
    border-radius: theme.$border-radius;
    background-color: var(--#{tokens.$css-variable-prefix}tag-background-color);
}

.Tag--subtle {
    color: var(--#{tokens.$css-variable-prefix}tag-subtle-color);
    border-color: var(--#{tokens.$css-variable-prefix}tag-subtle-border-color);
    background-color: var(--#{tokens.$css-variable-prefix}tag-subtle-background-color);
}

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

.Tag--subtle.Tag--xsmall {
    border-color: transparent;
    background-color: transparent;
}
