/* Badge Component */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    border-radius: 100px;
    white-space: nowrap;
    font-size: var(--text-sm);

}

.badge.badge__edges {
    border-radius: 12px;
}

/* Size Variants */

.badge--sm {
    height: 20px;
    padding: 0 var(--spacing-6);
    font-size: var(--ix-type-xs);
}

.badge--md {
    height: 24px;
    padding: 0 var(--spacing-8);
}

.badge--lg {
    height: 28px;
    padding: 0 var(--spacing-12);
}

/* Primary Badge Variants  */
.badge--primary.badge--light {
    background-color: var(--ix-color-white);
    color: var(--color-domains-600);
    border: 1px solid var(--color-domains-300);
}
.badge--primary.badge--mid {
    background-color: var(--color-domains-100);
    color: var(--color-domains-600);
    border: 1px solid var(--color-domains-200);
}
.badge--primary.badge--dark {
    background-color: var(--color-domains-500);
    color: var(--ix-color-white);
}

/* Hosting Badge Variants - Used for hosting-related features and services */
.badge--hosting.badge--light {
    background-color: var(--ix-color-white);
    color: var(--color-hosting-700);
    border: 1px solid var(--color-hosting-300);
}
.badge--hosting.badge--mid {
    background-color: var(--color-hosting-100);
    color: var(--color-hosting-700);
    border: 1px solid var(--color-hosting-200);
}
.badge--hosting.badge--dark {
    background-color: var(--color-hosting-500);
    color: var(--ix-color-white);
}

/* Encryption Badge Variants - Used for security and SSL-related features */
.badge--encryption.badge--light {
    background-color: var(--ix-color-white);
    color: var(--color-encryption-700);
    border: 1px solid var(--color-encryption-300);
}
.badge--encryption.badge--mid {
    background-color: var(--color-encryption-100);
    color: var(--color-encryption-700);
    border: 1px solid var(--color-encryption-200);
}
.badge--encryption.badge--dark {
    background-color: var(--color-encryption-500);
    color: var(--ix-color-white);
}

/* Error Badge Variants - Used for error states and alerts */
.badge--error.badge--light {
    background-color: var(--ix-color-white);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-300);
}
.badge--error.badge--mid {
    background-color: var(--color-error-100);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-200);
}
.badge--error.badge--dark {
    background-color: var(--color-error-500);
    color: var(--ix-color-white);
}

/* Success Badge Variants - Used for successful operations and positive states */
.badge--success.badge--light {
    background-color: var(--ix-color-white);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-300);
}
.badge--success.badge--mid {
    background-color: var(--ix-color-success-verylight);
    color: var(--ix-color-success-dark);
    border: 1px solid var(--ix-color-success-light);
}
.badge--success.badge--dark {
    background-color: var(--color-success-500);
    color: var(--ix-color-white);
}

/* Warning Badge Variants - Used for warnings and cautionary states */
.badge--warning.badge--light {
    background-color: var(--ix-color-white);
    color: var(--color-warning-500);
    border: 1px solid var(--color-warning-300);
}
.badge--warning.badge--mid {
    background-color: var(--color-warning-100);
    color: var(--color-warning-600);
    border: 1px solid var(--color-warning-200);
}
.badge--warning.badge--dark {
    background-color: var(--color-warning-500);
    color: var(--ix-color-white);
}

/* Black Badge Variants - Used for high contrast and neutral states */
.badge--gray.badge--light {
    background-color: var(--ix-color-white);
    color: var(--ix-color-black);
    border: 1px solid var(--ix-color-grey-light);

}
.badge--gray.badge--mid {
    background-color: var(--ix-color-grey-light);
    color: var(--ix-color-black);
    border: 1px solid var(--ix-color-grey-mid);
}
.badge--gray.badge--dark {
    background-color: var(--bg-opposite);
    color: var(--text-in-opposite);
}

/* Icon Styles */
.badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge__icon svg {
    width: 1em;
    height: 1em;
}

.badge--icon-before .badge__icon:first-child {
    margin-right: -4px;
}

.badge--icon-after .badge__icon:last-child {
    margin-left: -4px;
}

.badge__text {
    line-height: 1;
}