//
// _badges.scss
//

@use "../variables" as *;
@use "../utils/mixins" as *;
@use "sass:map";

@each $state in map.keys($theme-colors) {
    .badge-soft-#{$state} {
        color: var(--#{$state});
        background-color: var(--#{$state}-transparent);
        border-bottom:  1px solid var(--#{$state});
        &[href] {
            color: var(--#{$state});
            text-decoration: none;
            background-color: var(--#{$state}-transparent);
            &:is(:hover, :focus) {
                color: var(--#{$state});
                text-decoration: none;
                background-color: var(--#{$state}-transparent);
            }
        }
    }
}
.badge-soft-purple {
    background-color: $purple-transparent;
    color: $purple;
}
.badge-soft-pink {
    background-color: $pink-transparent;
    color: $pink;
}
.badge-soft-teal {
    background-color: $teal-transparent;
    color: $teal;
}
.badge-soft-orange {
    background-color: $orange-transparent;
    color: $orange;
}
.badge-soft-cyan {
    background-color: $cyan-transparent;
    color: $cyan;
    border-bottom: 1px solid $cyan;
}
.badge-soft-dark {
    color: $white;
}
.bg-cyan {
    background-color: $cyan;
}

.badge-soft-light {
    color: $gray-900 !important;
}

// Outline badge
@each $state in map.keys($theme-colors) {
    .badge-outline-#{$state} {
        color: var(--#{$state});
        border: 1px solid var(--#{$state});
        background-color: transparent;

        &[href] {
            color: var(--#{$state});
            text-decoration: none;
            background-color: var(--#{$state}-transparent);

            &:is(:hover, :focus) {
                color: var(--#{$state});
                text-decoration: none;
                background-color: var(--#{$state}-transparent);
            }
        }
    }
}
.badge {
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: $font-weight-medium;
    padding: 5px 6px;
    border-radius: $border-radius;
}
.badge.badge-md{
    font-size: 13px;
    padding: 0.375rem 0.5rem;
}
.badge.badge-lg{
    font-size: $font-size-base;
    padding: 0.5rem 0.75rem;
}