/* ============================================================================
   06-COMPONENTS -> #BADGE
   ========================================================================= */

/**
 * A small label that highlights important information such as notifications.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Badge
 *
 * 1. Set the 'border-radius' to be exactly half of the badge height to ensure
 *    it is always perfectly curved.
 */

.badge {
    --badge-bg: transparent;
    --badge-border-color: transparent;
    --badge-border-width: var(--border-width);
    --badge-color: unset;
    --badge-font-size: #{$font-size-sm};
    --badge-height: var(--space-6);
    --badge-icon-color: transparent;
    --badge-line-height: #{$line-height-sm};
    --badge-padding-x: .625rem;

    align-items: center;
    background-color: var(--badge-bg);
    border: var(--badge-border-width) solid var(--badge-border-color);
    border-radius: calc(var(--badge-height) / 2); // [1]
    color: var(--badge-color);
    gap: var(--space-1);
    display: inline-flex;
    font-size: var(--badge-font-size);
    font-weight: var(--font-weight-medium);
    height: var(--badge-height);
    line-height: var(--badge-line-height);
    padding-left: var(--badge-padding-x);
    padding-right: var(--badge-padding-x);

    & > .icon {
        color: var(--badge-icon-color);
    }
}


/**
 * Badge label
 */

.badge__label {
    display: flex;
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Small badge
 */

.badge[data-size=sm] {
    --badge-font-size: #{$font-size-xs};
    --badge-height: 1.375rem;
    --badge-line-height: #{$line-height-xs};
}


/**
 * Modifier: Large badge
 */

.badge[data-size=lg] {
    --badge-font-size: #{$font-size-sm};
    --badge-height: 1.625rem;
    --badge-line-height: #{$line-height-sm};
}


/**
 * Modifier: Error badge
 */

.badge[data-theme=error] {
    --badge-bg: var(--color-error-50);
    --badge-border-color: var(--color-error-200);
    --badge-color: var(--color-error-700);
    --badge-icon-color: var(--color-error-500);
}


/**
 * Modifier: Gray badge
 */

.badge[data-theme=gray] {
    --badge-bg: var(--color-gray-50);
    --badge-border-color: var(--color-gray-200);
    --badge-color: var(--color-gray-700);
    --badge-icon-color: var(--color-gray-500);
}


/**
 * Modifier: Success badge
 */

.badge[data-theme=success] {
    --badge-bg: var(--color-success-50);
    --badge-border-color: var(--color-success-200);
    --badge-color: var(--color-success-700);
    --badge-icon-color: var(--color-success-500);
}
    
    
/**
 * Modifier: Warning badge
 */

.badge[data-theme=warning] {
    --badge-bg: var(--color-warning-50);
    --badge-border-color: var(--color-warning-200);
    --badge-color: var(--color-warning-700);
    --badge-icon-color: var(--color-warning-500);
}
    
    
/**
 * Modifier: Primary badge
 */

.badge[data-theme=primary] {
    --badge-bg: var(--color-primary-50);
    --badge-border-color: var(--color-primary-200);
    --badge-color: var(--color-primary-700);
    --badge-icon-color: var(--color-primary-500);
}