@use "../utils/mixins";
@use "../utils/variables";

.dash-widget {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: variables.$white;
    margin-bottom: 24px;
    &.dash1{
        .dash-widgetimg{
           span{
            background: rgba(40, 199, 111, 0.12);
           }
        }
    }
    &.dash2{
        .dash-widgetimg{
           span{
             background: rgba(0, 207, 232, 0.12);
           }
        }
    }
    &.dash3{
        .dash-widgetimg{
           span{
                background: rgba(234, 84, 85, 0.12);
           }
        }
    }
    .dash-widgetcontent {
        margin-left: 15px;
        h5 {
            font-size: variables.$font-size-18;
        }
        h6 {
            font-weight: variables.$font-weight-normal;
            font-size: variables.$font-size-base;
            color: variables.$gray-600;
            width: 100%;
            margin-bottom: 0;
        }
    }
    .dash-widgetimg {
        span {
            width: 48px;
            height: 48px;
            background: rgba(249, 110, 111, 0.12);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            justify-content: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            @include mixins.rounded(50px);
        }
    }
}
.dash-count {
    background: variables.$primary;
    color: variables.$white;
    min-height:98px;
    width: 100%;
    @include mixins.rounded(6px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    @include mixins.margin-padding(0 0 25px, 20px);
    &.das1{
        background: variables.$cyan-900;
    }
    &.das2{
        background: variables.$title-color;
        
    }
    &.das3{
        background: variables.$success;
    }
    h4 {
        color: variables.$white;
        font-size: variables.$font-size-24;
    }
    h5 {
        color: variables.$white;
        font-size: variables.$font-size-14;
        font-weight: variables.$font-weight-normal;
    }
    .dash-imgs{
		display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        @include mixins.transition(all 0.5s ease);
        img{
            width: 50px;
            height: 50px;
        }
        i{
            font-size: variables.$font-size-36;
            color: variables.$white;
        }
        svg{
            width: 50px;
            height: 50px;
        }
    }
    &:hover{
        .dash-imgs{
            @include mixins.transform(scale(1.25));
        }
    }
}
.graph-sets{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    >ul{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        @include mixins.respond-below(custom991) {
            display: none;
        }
        li{
            margin-right: 35px;
            span{
                color: variables.$gray-600;
                font-weight: variables.$font-weight-normal;
                position: relative;
                &:after{
                    content:"";
                    width:12px;
                    height: 12px;
                    background-color: variables.$success;
                    @include mixins.rounded(50px);
                    @include mixins.position(absolute,3px,null,null,-20px);
                }
            }
            &:last-child{
                margin-right: 16px;
                span{
                    &:after{
                        background-color: variables.$danger-700;
                    }
                }
            }
        }
    }

}
.dashboard-expired-products {
    &.table {
        tbody {
            td.action-table-data {
                a {
                    @include mixins.rounded(8px);
                    color: variables.$blue;
                    svg, .feather-edit {
                        color: variables.$blue;
                    }
                    .feather-trash-2 {
                        color: variables.$danger;
                    }
                    &:hover {
                        background: variables.$light;
                    }
                    &.confirm-text {
                        color: variables.$danger;
                    }
                }
            }
        }
    }
}