@import "inc/bootstrap";

$background: $darkBar;
$foreground: $darkBarTxt;
$brightOrange : rgb(209, 108, 85);//special color to make the warning color better for the badge

.badge-component {
    position: relative;
    .loader:not(.hidden) {
        position: relative;
        top:-1px;
        width:25px;
        height:25px;
        border-radius:50%;
        @include animation(badge-component-rotate 1.4s infinite linear);
        @include vendor-prefix(background, linear-gradient(left, rgba($foreground,1) 10%, rgba($foreground,0) 42%), value);
        @include vendor-prefix(transform, translateZ(0));
        @include keyframes(badge-component-rotate) {
            0% {
                @include vendor-prefix(transform, rotate(0deg));
            }
            100% {
                @include vendor-prefix(transform, rotate(360deg));
            }
        }
        &:before {
            width:50%;
            height:50%;
            background: $foreground;
            border-radius: 100% 0 0 0;
            position:absolute;
            top:0;
            left:0;
            content:'';
        }
        &:after {
            background: $background;
            width:75%;
            height:75%;
            border-radius:50%;
            content:'';
            margin:auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
        }
    }
    .badge{
        background: $foreground;
        @include vendor-prefix(user-select, none);
        @include font-size(12);
        width:19px;
        height:19px;
        border-radius:50%;
        position: absolute;
        top: 2px;
        left: 3px;
        padding-top: 1px;
        text-align: center;
        display: inline-block;
        &.badge-info{
            color: whiten($info, 0.9);
            background: whiten($info, 0.2);
        }
        &.badge-success{
            color: whiten($success, 0.9);
            background: whiten($success, 0.2);
        }
        &.badge-warning{
            color: whiten($brightOrange, 0.9);
            background: $brightOrange;
        }
        &.badge-error{
            color: whiten($error, 0.9);
            background: $error;
        }
        &.icon-result-ok{
            &::before{
                top: 3px;
                position: relative;
                color: blue;
            }
        }
    }
    .badge-border{
        background: $foreground;
        width:21px;
        height:21px;
        border-radius:50%;
        position: absolute;
        top: 1px;
        left: 2px;
    }
}