.badge {
    @extend .d-inline-flex, .flex-center, .gap-1;

    font-size: var(--small);
    padding: .25rem .7rem;
    line-height: 1.4;
    margin: 0;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;

    &.secondary {
        background-color: var(--secondary-300);
        color: var(--secondary-950);
    }

    &.accent {
        background-color: var(--accent);
        color: var(--accent-900);
    }

    &.primary {
        background-color: var(--primary);
        color: var(--primary-950);
    }

    &.error {
        background-color: var(--error-light);
        color: var(--error);
    }

    &.warning {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    &.info {
        background-color: var(--info-light);
        color: var(--info);
    }

    &.success {
        background-color: var(--success-light);
        color: var(--success);
    }

    &.ghost-accent {
        background-color: var(--accent-900);
        border: 1px solid var(--accent-900);
        color: var(--accent);

        &[href]:hover,
        &[type="button"]:hover {
            background-color: var(--accent);
            border-color: var(--accent);
            color: var(--accent-900);
        }
    }

    &.ghost-primary {
        background-color: var(--transp-1);
        color: var(--primary);

        &[href]:hover,
        &[type="button"]:hover {
            background-color: var(--primary);
            color: var(--primary-950);
        }
    }
}