/* @define Pill */

.Pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--border-radius-circle);
    border: var(--border-xs) solid transparent;
    font-weight: var(--font-weight-regular);
    line-height: 100%;
    white-space: nowrap;
    vertical-align: middle;
}

.Pill:focus::after {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--border-sm) solid;
    border-radius: inherit;
    pointer-events: none;
}

.Pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}

.Pill-label {
    display: inline-block;
    line-height: 1;
}

/* ---------- Sizes ---------- */

.Pill--sm {
    font-size: var(--font-size-body-small);
    padding: var(--padding-xs);
    min-height: var(--sizes-button-mini);
}

.Pill--md {
    font-size: var(--font-size-h6);
    padding: var(--padding-xs);
    min-height: var(--sizes-button-small);
}

.Pill--lg {
    font-size: var(--font-size-medium);
    padding: var(--padding-sm);
    min-height: var(--sizes-button-default);
}

.Pill--sm .Pill-icon {
    font-size: var(--font-size-body-small);
}

.Pill--md .Pill-icon {
    font-size: var(--font-size-small);
}

.Pill--lg .Pill-icon {
    font-size: var(--font-size-medium);
}

/* ---------- Variants ---------- */

/* ---------- Variants: Subtle appearance (default) ---------- */

/* Info */
.Pill--info {
    background-color: var(--surface-default);
    border-color: var(--border-info-subtle);
    color: var(--text-info-dark);
}

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

.Pill--info:focus {
    background-color: var(--surface-info-accent);
    color: var(--text-emphasis);
}

.Pill--info:focus::after {
    border-color: var(--border-info);
}

/* Success */
.Pill--success {
    background-color: var(--surface-success-subtle);
    border-color: var(--border-success-subtle);
    color: var(--text-success);
}

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

.Pill--success:focus {
    background-color: var(--surface-success-accent);
    color: var(--text-success-dark);
}

.Pill--success:focus::after {
    border-color: var(--border-success);
}

/* Warning */
.Pill--warning {
    background-color: var(--surface-warning-subtle);
    border-color: var(--border-warning-subtle);
    color: var(--text-warning);
}

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

.Pill--warning:focus {
    background-color: var(--surface-warning-accent);
    color: var(--text-warning-strong);
}

.Pill--warning:focus::after {
    border-color: var(--border-warning);
}

/* Danger */
.Pill--danger {
    background-color: var(--surface-danger-subtle);
    border-color: var(--border-danger-subtle);
    color: var(--text-danger);
}

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

.Pill--danger:focus {
    background-color: var(--surface-danger-subtle-accent);
    color: var(--text-danger-strong);
}

.Pill--danger:focus::after {
    border-color: var(--border-danger);
}

/* Neutral */
.Pill--neutral {
    background-color: var(--surface-default);
    border-color: var(--border-subtle);
    color: var(--text-accent);
}

.Pill--neutral:hover {
    background-color: var(--surface-container-hover);
    color: var(--text-emphasis);
}

.Pill--neutral:focus {
    background-color: var(--surface-container-hover);
    color: var(--text-emphasis);
}

.Pill--neutral:focus::after {
    border-color: var(--border-default);
}

/* Primary */
.Pill--primary {
    background-color: var(--surface-primary-subtle);
    border-color: var(--border-primary-subtle);
    color: var(--text-primary);
}

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

.Pill--primary:focus {
    background-color: var(--surface-primary-accent);
    color: var(--text-primary-emphasis);
}

.Pill--primary:focus::after {
    border-color: var(--border-primary-focus);
}

/* ---------- Variants: Strong appearance ---------- */

/* Info (strong) */
.Pill--strong.Pill--info {
    background-color: var(--surface-info);
    color: var(--text-inverse);
}

.Pill--strong.Pill--info:hover {
    background-color: var(--surface-info-strong);
    color: var(--text-inverse);
}

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

/* Success (strong) */
.Pill--strong.Pill--success {
    background-color: var(--surface-success);
    color: var(--text-inverse);
}

.Pill--strong.Pill--success:hover {
    background-color: var(--surface-success-strong);
    color: var(--text-inverse);
}

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

/* Warning (strong) */
.Pill--strong.Pill--warning {
    background-color: var(--surface-warning);
    color: var(--text-inverse);
}

.Pill--strong.Pill--warning:hover {
    background-color: var(--surface-warning-strong);
    color: var(--text-inverse);
}

.Pill--strong.Pill--warning:focus {
    background-color: var(--surface-warning-strong);
    color: var(--text-inverse);
    border-color: var(--border-warning-subtle);
}

/* Danger (strong) */
.Pill--strong.Pill--danger {
    background-color: var(--surface-danger);
    color: var(--text-inverse);
}

.Pill--strong.Pill--danger:hover {
    background-color: var(--surface-danger-strong);
    color: var(--text-inverse);
}

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

/* Neutral (strong) */
.Pill--strong.Pill--neutral {
    background-color: var(--surface-subtle-dark);
    color: var(--text-accent);
}

.Pill--strong.Pill--neutral:hover {
    background-color: var(--surface-accent);
    color: var(--text-emphasis);
}

.Pill--strong.Pill--neutral:focus {
    background-color: var(--surface-accent);
    border-color: var(--border-default);
    color: var(--text-emphasis);
}

/* Primary (strong) */
.Pill--strong.Pill--primary {
    background-color: var(--surface-primary);
    color: var(--text-inverse);
}

.Pill--strong.Pill--primary:hover {
    background-color: var(--primary-strong);
    color: var(--text-inverse);
}

.Pill--strong.Pill--primary:focus {
    background-color: var(--primary-strong);
    color: var(--text-inverse);
    border-color: var(--border-primary-focus);
}