.tag {
    border-width: 1px;
    border-style: solid;
    white-space: nowrap;
    user-select: none;
    width: fit-content;

    &.brand {
        border-color: var(--brand-border-strong);
        background-color: var(--brand-background-strong);
        color: var(--brand-on-background-medium);
    }

    &.accent {
        border-color: var(--accent-border-strong);
        background-color: var(--accent-background-strong);
        color: var(--accent-on-background-medium);
    }

    &.neutral {
        border-color: var(--neutral-border-medium);
        background-color: var(--surface-background);
        color: var(--neutral-on-background-medium);
    }

    &.warning {
        border-color: var(--warning-border-strong);
        background-color: var(--warning-background-strong);
        color: var(--warning-on-background-medium);
    }

    &.danger {
        border-color: var(--danger-border-strong);
        background-color: var(--danger-background-strong);
        color: var(--danger-on-background-medium);
    }

    &.success {
        border-color: var(--success-border-strong);
        background-color: var(--success-background-strong);
        color: var(--success-on-background-medium);
    }

    &.info {
        border-color: var(--info-border-strong);
        background-color: var(--info-background-strong);
        color: var(--info-on-background-medium);
    }

    &.gradient {
        border-color: var(--brand-alpha-medium);
        background-image: linear-gradient(45deg, var(--brand-background-strong), var(--accent-background-strong));
        color: var(--brand-on-background-medium);
    }
}

.s {
    padding: 0 var(--static-space-4);
}

.m {
    padding: var(--static-space-2) var(--static-space-8);
}

.l {
    padding: var(--static-space-4) var(--static-space-12);
}