/***
Dashboard Stats
***/

@mixin dashboard-stat-variant($name, $bg-color, $text-color) {
    &.#{$name} {
        background-color: $bg-color;  

        &.dashboard-stat-light:hover {
            background-color: darken($bg-color, 4%);            
        }

        .visual {
            > i { 
                color: $text-color;
                opacity: 0.1;
                filter: alpha(opacity=10); 
            }
        }

        .details {
            .number {
                color: $text-color; 
            }

            .desc {
                color: $text-color; 
                opacity: 1;
                filter: alpha(opacity=100);    
            }              
        }

        .more {
            color: $text-color;
            background-color: darken($bg-color, 4%);   
        }
    }
}

.dashboard-stat {
    display: block;
    margin-bottom: 25px;
    overflow: hidden;

    @include border-radius($general-border-radius);  

    @include clearfix();

    .portlet &:last-child {
        margin-bottom: 0;
    }

    @if $theme-type == "material-design" {
        box-shadow: $general-shadow;
    }

    .visual {
        width: 80px;
        height:80px;
        display: block;
        float: left;
        padding-top: 10px;
        padding-left: 15px;   
        margin-bottom: 15px;  
        font-size: 35px; 
        line-height: 35px; 

        > i {
            margin-left: -35px;  
            font-size: 110px; 
            line-height: 110px;  
        }
    }

    .details { 
        position: absolute;
        right: 15px;
        padding-right: 15px;  
 
        .number {    
            padding-top: 25px;  
            text-align: right; 
            font-size: 34px;
            line-height: 36px;
            letter-spacing: -1px;
            margin-bottom: 0px;     
            font-weight: 300;
        }

        .desc {
            text-align: right;
            font-size: 16px;
            letter-spacing: 0px;
            font-weight: 300;
        }
    }

    .more {
        clear: both;
        display: block;   
        padding: 6px 10px 6px 10px;
        position: relative;
        text-transform: uppercase;
        font-weight: 300;
        font-size: 11px;
        opacity: 0.7;  
        filter: alpha(opacity=70);

        &:hover {
            text-decoration: none;
            opacity: 0.9;  
            filter: alpha(opacity=90);
        }

        > i {
            display: inline-block;
            margin-top: 1px;
            float: right;
        }
    }  

    &.dashboard-stat-v2 {
        .visual {
            padding-top: 35px;
            margin-bottom: 40px;  
        }   
    }
}

@each $name, $colors in $component-colors {
    .dashboard-stat {
        @include dashboard-stat-variant($name, map-get($colors, base), map-get($colors, font));
    }
}

.dashboard-stat-light {
    padding-bottom: 20px;
    margin-bottom: 20px;

    .details {
        margin-bottom: 5px;

        .number {
            font-weight: 300;
            margin-bottom: 0px;
        }
    }
}

/***
Dashboard Stats 2
***/

.dashboard-stat2 {
    @include border-radius($general-border-radius);
    background: #fff;
    padding: 15px 15px 30px 15px; 
    margin-bottom: 20px;  

    @if $theme-type == "material-design" {
        box-shadow: $general-shadow;
    }

    &.bordered {
        border: 1px solid $general-panel-border-color;
    }

    .display {
        @include clearfix();
        margin-bottom: 20px;

        .number {
            float: left;
            display: inline-block;
            
            h3 {
                margin: 0 0 2px 0;  
                padding: 0;
                font-size: 30px;
                font-weight: 400;

                > small {
                    font-size: 23px;
                }
            }

            small {
                font-size: 14px;
                color: #AAB5BC;
                font-weight: 600; 
                text-transform: uppercase;
            }

        }

        .icon {
            display: inline-block;
            float: right;
            padding: 7px 0 0 0;

            > i {
                color: #cbd4e0;
                font-size: 26px;
            }
        }  
    }

    .progress-info {
        clear:both;

        .progress { 
            margin: 0;        
            height: 4px;
            clear:both;
            display: block; 
        }

        .status {
            margin-top: 5px;
            font-size: 11px;
            color: #AAB5BC;
            font-weight: 600; 
            text-transform: uppercase;

            .status-title {
                float: left;
                display: inline-block;
            }

            .status-number {
                float: right;
                display: inline-block;
            }
        }
    }    
}

/***
Text Stats
***/

.text-stat {
    h3 {
        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 18px;
    }

    span {
        font-size: 13px !important;
    }
}

@media (max-width: $screen-xs-max) { /* 767px */  

  .text-stat {
    margin-top: 20px;
  }  

}