/* Badge */

.badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 1.5rem;
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-sm);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 100%;
    letter-spacing: -0.0203rem;
    white-space: nowrap;
    padding: var(--padding-2) var(--padding-3);
    border-radius: var(--radius-2);
    background: var(--color-element-neutral-default);
}

.badge-lg {
    font-size: var(--font-size-label-md);
    letter-spacing: -0.0234rem;
    padding: var(--padding-3);
    border-radius: var(--radius-2);
}

.badge-sm {
    min-height: 1.25rem;
    font-size: var(--font-size-label-xsm);
    letter-spacing: -0.0172rem;
    padding: var(--padding-2);
    border-radius: var(--radius-2);
}

.badge.outline {
    border: var(--border-1) solid var(--color-element-neutral-default);
    background: transparent;
}
.badge.solid {
    color: var(--color-font-neutral-static-inverse);
    background: var(--color-element-neutral-default);
}
.badge.pastel {
    color: var(--color-font-neutral-default);
    background: var(--color-element-neutral-subtle);
}
.badge.neutral.outline {
    border: var(--border-1) solid var(--color-element-neutral-default);
}
.badge.neutral.solid {
    color: var(--color-font-neutral-static-inverse);
    background: var(--color-element-neutral-default);
}
.badge.neutral.pastel {
    color: var(--color-font-neutral-default);
    background: var(--color-element-neutral-subtle);
}
.badge.primary.outline {
    color: var(--color-font-theme-primary);
    border: var(--border-1) solid var(--color-element-theme-primary-strong);
}
.badge.primary.solid {
    color: var(--color-font-neutral-static-inverse);
    background: var(--color-element-theme-primary-strong);
}
.badge.primary.pastel {
    color: var(--color-font-theme-primary);
    background: var(--color-element-theme-primary-subtler);
}
.badge.secondary.outline {
    color: var(--color-font-theme-secondary);
    border: var(--border-1) solid var(--color-element-theme-secondary-strong);
}
.badge.secondary.solid {
    background: var(--color-element-theme-secondary-strong);
}
.badge.secondary.pastel {
    color: var(--color-font-theme-secondary);
    background: var(--color-element-theme-secondary-subtler);
}
.badge.accent.outline {
    color: var(--color-font-theme-accent);
    border: var(--border-1) solid var(--color-element-theme-accent-strong);
}
.badge.accent.solid {
    background: var(--color-element-theme-accent-strong);
}
.badge.accent.pastel {
    color: var(--color-font-theme-accent);
    background: var(--color-element-theme-accent-subtler);
}
.badge.danger.outline {
    color: var(--color-font-system-danger);
    border: var(--border-1) solid var(--color-element-system-danger-strong);
}
.badge.danger.solid {
    background: var(--color-element-system-danger);
}
.badge.danger.pastel {
    color: var(--color-font-system-danger);
    background: var(--color-element-system-danger-inverse);
}
.badge.warning.outline {
    color: var(--color-font-system-warning);
    border: var(--border-1) solid var(--color-element-system-warning-strong);
}
.badge.warning.solid {
    color: var(--color-font-neutral-static);
    background: var(--color-element-system-warning);
}
.badge.warning.pastel {
    color: var(--color-font-system-warning);
    background: var(--color-element-system-warning-inverse);
}
.badge.success.outline {
    color: var(--color-font-system-success);
    border: var(--border-1) solid var(--color-element-system-success-strong);
}
.badge.success.solid {
    background: var(--color-element-system-success);
}
.badge.success.pastel {
    color: var(--color-font-system-success);
    background: var(--color-element-system-success-inverse);
}
.badge.info.outline {
    color: var(--color-font-system-information);
    border: var(--border-1) solid var(--color-element-system-information-strong);
}
.badge.info.solid {
    background: var(--color-element-system-information);
}
.badge.info.pastel {
    color: var(--color-font-system-information);
    background: var(--color-element-system-information-inverse);
}
.badge.disabled.outline {
    color: var(--color-font-neutral-disabled);
    border: var(--border-1) solid var(--color-element-neutral-disabled);
}
.badge.disabled.solid {
    color: var(--color-font-neutral-disabled-strong);
    background: var(--color-element-neutral-disabled);
}
.badge.disabled.pastel {
    color: var(--color-font-neutral-disabled-strong);
    background: var(--color-element-neutral-disabled);
}

/* Status indicator */
.status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2);
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-md);
    color: var(--color-font-neutral-default);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    line-height: 100%;
    letter-spacing: -0.0234rem;
}
.status::before {
    content: '';
    flex-shrink: 0;
    width: 0.375rem;
    height: 0.375rem;
    aspect-ratio: 1/1;
    border-radius: var(--radius-max);
    background: var(--color-element-neutral-default);
}

.status.danger {
    color: var(--color-font-system-danger);
}
.status.danger::before {
    background: var(--color-element-system-danger-strong);
}
.status.success {
    color: var(--color-font-system-success);
}
.status.success::before {
    background: var(--color-element-system-success-strong);
}
.status.info {
    color: var(--color-font-system-information);
}
.status.info::before {
    background: var(--color-element-system-information-strong);
}
.status.warning {
    color: var(--color-font-system-warning);
}
.status.warning::before {
    background: var(--color-element-system-warning-strong);
}

.status.lg {
    gap: var(--gap-3);
    font-size: var(--font-size-label-xlg);
    letter-spacing: -0.0313rem;
    color: var(--color-font-neutral-strong);
}
.status.lg::before {
    width: 1rem;
    height: 1rem;
}