/* @define Badge */

/* The custom properties below opt out of plugin/selector-bem-pattern, which expects the capitalised "Badge" prefix that the lowercase custom-property-pattern rule rejects (see CurrencyCodeInput.css). */

/* stylelint-disable plugin/selector-bem-pattern */
.Badge {
    border-width: var(--border-xs);
    border-radius: var(--border-radius-default);
    border-style: solid;
    place-content: center;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
}
/* stylelint-enable plugin/selector-bem-pattern */

/* Variants */

.Badge-neutral {
    background-color: var(--surface-default);
    border-color: var(--border-subtle);
    color: var(--text-subtle);
}

.Badge-neutral--hover:hover {
    background-color: var(--surface-container-hover);
    border-color: transparent;
    color: var(--text-accent);
}

.Badge-neutral--strong {
    background-color: var(--surface-subtle-dark);
    border-color: transparent;
    color: var(--text-accent);
}

.Badge-neutral--strongHover:hover {
    background-color: var(--surface-accent);
    border-color: transparent;
    color: var(--text-emphasis);
}

.Badge-success {
    background-color: var(--surface-success-subtle);
    border-color: var(--border-success-subtle);
    color: var(--text-success);
}

.Badge-success--hover:hover {
    background-color: var(--surface-success-accent);
    border-color: transparent;
    color: var(--text-success-dark);
}

.Badge-success--strong {
    background-color: var(--surface-success);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-success--strongHover:hover {
    background-color: var(--surface-success-strong);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-warning {
    background-color: var(--surface-warning-subtle);
    border-color: var(--border-warning-subtle);
    color: var(--text-warning);
}

.Badge-warning--hover:hover {
    background-color: var(--surface-warning-accent);
    border-color: transparent;
    color: var(--text-warning-strong);
}

.Badge-warning--strong {
    background-color: var(--surface-warning);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-warning--strongHover:hover {
    background-color: var(--surface-warning-strong);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-danger {
    background-color: var(--surface-danger-subtle);
    border-color: var(--border-danger-subtle);
    color: var(--text-danger);
}

.Badge-danger--hover:hover {
    background-color: var(--surface-danger-subtle-accent);
    border-color: transparent;
    color: var(--text-danger-strong);
}

.Badge-danger--strong {
    background-color: var(--surface-danger);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-danger--strongHover:hover {
    background-color: var(--surface-danger-strong);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-primary {
    background-color: var(--surface-primary-subtle);
    border-color: var(--border-primary-subtle);
    color: var(--text-primary);
}

.Badge-primary--hover:hover {
    background-color: var(--surface-primary-accent);
    border-color: transparent;
    color: var(--text-primary-emphasis);
}

.Badge-primary--strong {
    background-color: var(--surface-primary);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-primary--strongHover:hover {
    background-color: var(--surface-primary-strong);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-info {
    background-color: var(--surface-default);
    border-color: var(--border-info-subtle);
    color: var(--text-info-dark);
}

.Badge-info--hover:hover {
    background-color: var(--surface-info-accent);
    border-color: transparent;
    color: var(--text-info-dark);
}

.Badge-info--strong {
    background-color: var(--surface-info);
    border-color: transparent;
    color: var(--text-inverse);
}

.Badge-info--strongHover:hover {
    background-color: var(--surface-info-strong);
    border-color: transparent;
    color: var(--text-inverse);
}

/* Sizes */
.Badge-sm {
    padding: var(--padding-xxs);
}

.Badge-md {
    padding: var(--padding-xs);
}