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

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

    display: inline-block;
    min-width: 1rem;
    height: 1rem;
    padding: theme.$padding-y theme.$padding-x;
    text-align: center;
    color: var(--#{tokens.$css-variable-prefix}pill-color);
    border-radius: theme.$border-radius;
    background-color: var(--#{tokens.$css-variable-prefix}pill-background-color);
}

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