/**=====================
    Badge CSS start
==========================**/
.badge {
    padding: $badge-padding;

    &+.badge {
        margin-left: 5px;
    }

    svg {
        width: $badge-svg-size;
        height: $badge-svg-size;
        padding-top: 3px;
    }
}

[class^="status-"] {
    span {
        padding: 5px 10px;
        text-transform: capitalize;
        display: inline-block;
        border-radius: 0;
        font-size: 12px;
        font-weight: 500;
    }
}

.status-danger,
.status-out_of_stock,
.status-failed,
.status-high,
.status-debit {
    span {
        color: #e22454;
        background-color: rgba($color: #e22454, $alpha: 0.1);
    }
}

.status-success,
.status-in_stock,
.status-completed,
.status-approved,
.status-delivered,
.status-credit {
    span {
        color: #2f8733;
        background-color: rgba($color: #2f8733, $alpha: 0.1);
    }
}

.status-pending,
.status-low,
.status-draft {
    span {
        color: #db8827;
        background-color: rgba($color: #db8827, $alpha: 0.1);
    }
}

.status-processing {
    span {
        color: #0077b3;
        background-color: rgba($color: #0077b3, $alpha: 0.1);
    }
}

.status-refund,
.status-cancelled,
.status-rejected {
    span {
        color: #d9534f;
        background-color: rgba($color: #d9534f, $alpha: 0.1);
    }
}

.status-shipped {
    span {
        color: rgb(144, 41, 255);
        background-color: rgba($color: #a04aff, $alpha: 0.1);
    }
}

.status-awaiting_for_approval {
    span {
        color: #7e7e7e;
        background-color: rgba($color: #7e7e7e, $alpha: 0.1);
    }
}

.badge-theme {
    background-color: var(--theme-color);
}

/* flat badge loop css */
@each $pill-badge-name,
$pill-badge-color in (primary, var(--theme-color)),
(secondary, $secondary-color),
(success, $success-color),
(danger, $danger-color),
(info, $info-color),
(light, $light-color),
(dark, $dark-color),
(warning, $warning-color) {
    .pill-badge-#{$pill-badge-name} {
        background-color: $pill-badge-color;
        box-shadow: -0.5px 4.33px 16px 0px rgba($pill-badge-color, 0.25);
        color: $white;
        border-radius: 0;
    }
}

.pill-badge-primary {
    background-color: var(--theme-color);
}

.pill-badge-secondary {
    background-color: var(--theme-secondary);
}

/* round badge loop css */
@each $round-badge-name,
$round-badge-color in (primary, var(--theme-color)),
(secondary, $secondary-color),
(success, $success-color),
(danger, $danger-color),
(info, $info-color),
(light, $light-color),
(dark, $dark-color),
(warning, $warning-color) {
    .round-badge-#{$round-badge-name} {
        border-radius: 6px;
        background-color: $round-badge-color;
        box-shadow: -0.5px -6.67px 14px 0px rgba($round-badge-color, 0.18);
        color: $white !important;
    }
}

.round-badge-primary {
    background-color: var(--theme-color);
}

.round-badge-secondary {
    background-color: var(--theme-secondary);
}