/*--------------------------------------------------
	[Widgets]
----------------------------------------------------*/

//##  Widget Colors
$widget-color-white:                #fff !default;
$widget-color-purple:               #9a7caf !default;
$widget-color-purple-dark:          #4b365a !default;
$widget-color-purple-light:         #674d79 !default;
$widget-color-green:                #4db3a4 !default;
$widget-color-red:                  #f36a5a !default;
$widget-color-blue:                 #5b9bd1 !default;
$widget-color-gray:                 #323c45 !default;
$widget-color-gray-dark:            #144f57 !default;
$widget-color-heading:              #a1afbb !default;
$widget-color-title:                #3e4f5e !default;
$widget-color-title-light:          #8e9daa !default;
$widget-color-fb:                   #475e98 !default;
$widget-color-tw:                   #55acee !default;
$widget-color-placeholder:          lighten($widget-color-red, 50%) !default;

//##  Widget Font Size
$widget-font-size-sm:               14px !default;
$widget-font-size-md:               21px !default;
$widget-font-size-lg:               20px !default;

//##  Widget Space Size
$widget-space-sm-size:              10px !default;
$widget-space-md-size:              20px !default;
$widget-space-lg-size:              30px !default;

//##  Widget Height Size
$widget-height-size-xs:             250px !default;
$widget-height-size-sm:             300px !default;
$widget-height-size-md:             350px !default;
$widget-height-size-bg:             420px !default;
$widget-height-size-lg:             500px !default;

/*** Widget Background Colors ***/
.widget-bg-color-purple { background: $widget-color-purple; }
.widget-bg-color-purple-dark { background: $widget-color-purple-dark; }
.widget-bg-color-purple-light { background: $widget-color-purple-light; }
.widget-bg-color-green { background: $widget-color-green; }
.widget-bg-color-red { background: $widget-color-red; }
.widget-bg-color-blue { background: $widget-color-blue; }
.widget-bg-color-gray { background: $widget-color-gray; }
.widget-bg-color-gray-dark { background: $widget-color-gray-dark; }
.widget-bg-color-white { background: $widget-color-white; }
.widget-bg-color-dark { background: $widget-color-title; }
.widget-bg-color-dark-light { background: $widget-color-title-light; }
.widget-bg-color-fb { background: $widget-color-fb; }
.widget-bg-color-tw { background: $widget-color-tw; }

/*** Widget Title Colors ***/
.widget-title-color-purple { color: $widget-color-purple; }
.widget-title-color-purple-dark { color: $widget-color-purple-dark; }
.widget-title-color-purple-light { color: $widget-color-purple-light; }
.widget-title-color-green { color: $widget-color-green; }
.widget-title-color-red { color: $widget-color-red; }
.widget-title-color-blue { color: $widget-color-blue; }
.widget-title-color-gray { color: $widget-color-gray; }
.widget-title-color-gray-dark { color: $widget-color-gray-dark; }
.widget-title-color-white { color: $widget-color-white; }
.widget-title-color-dark { color: $widget-color-title; }
.widget-title-color-dark-light { color: $widget-color-title-light; }
.widget-title-color-fb { color: $widget-color-fb; }
.widget-title-color-tw { color: $widget-color-tw; }

.overflow-h {
    overflow: hidden;
}


/*** Widget Carousel ***/
.widget-carousel {
    .carousel-indicators {
        left: -18%;
        bottom: 10px;
        margin-left: 0;
    }

    .carousel-indicators-red {
        > li {
            border-color: $widget-color-red;

            &.active {
                background: $widget-color-red;
            }
        }
    }
}

/*** Widget Gradient ***/
.widget-gradient {
    position: relative;
    min-height: $widget-height-size-md;
    overflow: hidden;
    background-size: cover;
    background-position:  50% 50%;

    border-radius: $general-border-radius;

	.widget-gradient-body {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: auto;
		padding: $widget-space-md-size;

        .widget-gradient-title {
            font-size: $widget-font-size-md;
            font-weight: 600;
            color: $widget-color-white;
            margin: 0;
        }

		.widget-gradient-body-actions {
			position: absolute;
			right: 20px;
			bottom: 20px;
			padding: 0;
			margin: 0;

			li {
				font-size: $widget-font-size-sm;
				padding: 0 0 0 8px;

				&:first-child {
					padding-left: 0;
				}

				a {
					color: $widget-color-white;

					&:hover {
						color: $widget-color-heading;
						text-decoration: none;
					}
				}
			}
		}
	}
}

/*** Widget Gradient ***/
.widget-wrap-img {
    border-radius: $general-border-radius;
    position: relative;
    min-height: $widget-height-size-md;
	padding: $widget-space-md-size;

    .widget-wrap-img-title {
        font-size: $widget-font-size-md;
        font-weight: 600;
        color: $widget-color-title;
        margin: 0 0 20px;
    }

	.widget-wrap-img-element {
        position: absolute;
        bottom: 0;
        right: 0;
	}
}

/*** Widget Tab ***/
.widget-tab {
    min-height: $widget-height-size-bg;
    border-radius: $general-border-radius;

	.nav-tabs { 
        margin: 0;
        border-color: #eff1f3;

        > li {
        	margin: 0 10px;

        	&:first-child {
        		margin-left: 20px;
        	}

            > a {
                border: 0;
                font-weight: bold;
                color: $widget-color-title-light;
                text-transform: uppercase;
                padding: 20px 0;

                > i {
                    color: $widget-color-title-light; 
                }
            }

            &.open,
            &:hover {
                border-bottom: 1px solid $widget-color-red;

                > a {
                    border: 0; 
                    background: inherit;
                    color: $widget-color-red;

                    > i {
                        color: $widget-color-red;
                    }
                }
            }

            &.active {
                border-bottom: 1px solid $widget-color-red;
                position: relative;

                > a {
                    border: 0; 
                    color: $widget-color-red;

                    > i {
                        color: $widget-color-red;
                    }
                }  
            }   
        }
    }

	.tab-content {
		padding: $widget-space-md-size;
		color: $widget-color-title-light;
	}

    .slimScrollBar {
        right: 10px !important;
        margin-top: 17px !important;
        margin-bottom: 17px !important;
    }
}

/*** Widget News ***/
.widget-news {
	overflow: hidden;
    margin-right: 10px;
    border-radius: $general-border-radius;

	.widget-news-left-elem {
		float: left;
		width: 100px;
		height: auto;
		margin-right: 15px;
	}

	.widget-news-right-body {
		overflow: hidden;

		.widget-news-right-body-title {
			font-size: 16px;
			font-weight: 600;
			color: #3e4f5e;
			margin: 0 0 5px;
			clear: both;

			.label {
				float: right;
				font-weight: 600;
				background: $widget-color-heading;
				border-radius: 3px !important;
			}
		}

		p {
			font-size: 13px;
		}
	}
}

/*** Widget Thumb ***/
.widget-thumb {
	padding: $widget-space-md-size;
    border-radius: $general-border-radius;

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

	.widget-thumb-heading {
        font-size: $widget-font-size-sm;
		font-weight: bold;
        color: $widget-color-title-light;
		margin: 0 0 20px 0;
	}

	.widget-thumb-wrap {
		overflow: hidden;

		.widget-thumb-icon {
			float: left;
			width: 60px;
			height: 60px;
			display: inline-block;
            font-size: $widget-font-size-lg;
			line-height: 41px;
			color: $widget-color-white;
			text-align: center;
			padding: 10px;
			margin-right: 15px;
		}
	}

	.widget-thumb-body {
		overflow: hidden;

        .widget-thumb-subtitle {
            padding-top: 2px;
			display: block;
            font-size: $widget-font-size-sm;
			font-weight: 600;
            color: $widget-color-title-light;
        }

        .widget-thumb-body-stat {
            display: block;
            font-size: 30px;
            font-weight: 600;
            color: $widget-color-title;
        }
	}
}

/*** Widget Socials ***/
.widget-socials {
    border-radius: $general-border-radius;
    min-height: $widget-height-size-xs;
    padding: $widget-space-md-size;

    .widget-socials-title {
        font-size: 25px;
        font-weight: 700;
        line-height: 1.4;
        color: $widget-color-white;
        margin: 0 0 20px;
    }

    .widget-social-subtitle {
        color: $widget-color-white;
        font-weight: 200;
        line-height: 1.4;

        a {
            color: $widget-color-white;
        }
    }

    .widget-socials-paragraph {
        display: block;
        color: #65727d;
    }

    %widget-social-icon {
        font-size: 30px;
        margin: 30px 0;
    }
    .widget-social-icon-fb {
        @extend %widget-social-icon;
        color: #2b3f72;
    }
    .widget-social-icon-tw {
        @extend %widget-social-icon;
        color: #3686c3;
    }
}

/*** Widget Comments ***/
.widget-comments {
    min-height: $widget-height-size-bg;
}

/*** Widget Media ***/
.widget-media {
    border-radius: $general-border-radius;
    border-bottom: 1px solid #f6f9fc;
    overflow: hidden;
    padding-bottom: 15px;
    margin-bottom: 15px;

    .widget-media-elements {
        float: left;
        margin-right: 20px;
    }

    .widget-media-avatar {
        width: 55px;
        height: 55px;
        display: block;
    }

    .widget-btn-default {
        display: inline-block;
        font-size: 12px;
        color: #96a2b1;
        border: 1px solid #ebf0f6;
        padding: 3px 10px;

        .widget-btn-icon {
            line-height: 1.5;
        }

        &:hover {
            background: #ebf0f6;
            text-decoration: none;
        }
    }

    .widget-btn-red {
        display: inline-block;
        font-size: 12px;
        color: #f36a5a;
        border: 1px solid #ebf0f6;
        padding: 3px 10px;

        .widget-btn-icon {
            line-height: 1.5;
        }

        &:hover {
            color: $widget-color-white;
            background: #f36a5a;
            text-decoration: none;
        }
    }

    .widget-btn-blue {
        display: inline-block;
        font-size: 12px;
        color: $widget-color-white;
        border: 1px solid #ebf0f6;
        padding: 3px 10px;
        background: $link-color;

        .widget-btn-icon {
            line-height: 1.5;
        }

        &:hover {
            color: $link-color;
            background: $widget-color-white;
            text-decoration: none;
        }
    }

    .widget-media-body {
        overflow: hidden;

        .widget-media-body-title {
            font-size: 15px;
            font-weight: 600;
            color: #5b9bd1;
            margin: 0 0 7px;
        }

        .widget-media-body-subtitle {
            font-size: 13px;
            color: #7e8c9e;
        }
    }
}

/*** Widget Blog ***/
.widget-blog {
    border-radius: $general-border-radius;
    background: $widget-color-white;
    padding: $widget-space-md-size;
    background-position: center center; 
    background-size: cover;

    padding-top: 30px;

    .widget-blog-heading {
        position: relative;
        margin-bottom: 30px;

        &:before {
            position: absolute;
            bottom: -15px;
            left: 50%;
            width: 50px;
            height: 1px;
            border-width: 1px;
            background: $widget-color-title-light;
            margin-left: -25px;
            content: " ";
        }
    }

    .widget-blog-title {
        font-size: $widget-font-size-lg;
        font-weight: 400;
        color: $widget-color-title;
        margin: 0 0 15px;

        a {
            color: $widget-color-title;
        }
    }
    
    .widget-blog-subtitle {
        display: block;
        font-size: 13px; 
        color: $widget-color-title-light;
        letter-spacing: 3px;
    }

    .btn-widget-purple {
        display: inline-block;
        font-size: 13px;
        color: $widget-color-title-light;
        border: 1px solid $widget-color-title-light;
        padding: 7px 17px;

        &:hover {
            color: $widget-color-white;
            background: $widget-color-title-light;
            text-decoration: none;
        }
    }
}

/*** Widget Progress ***/
.widget-progress {
    min-height: $widget-height-size-bg;

    .widget-progress-element {
        border-radius: $general-border-radius;
        overflow: hidden;
        padding: 30px 10px;
    }

    .widget-progress-title {
        display: block;
        color: $widget-color-white;
        margin-bottom: 5px;
    }

    .progress {
        height: 3px;
        @include background-opacity($widget-color-white, .2);
        margin-bottom: 0;
    }
}


/*** Widget Gradient ***/
.widget-map {
    border-radius: $general-border-radius;
    min-height: $widget-height-size-md;
    border-radius: 3px;

    .widget-map-mapplic {
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;

        .mapplic-container {
           background: $widget-color-blue;
        }

        .mapplic-layer.world {
            > img {
                opacity: .3;
            }
        }
    }

    .widget-map-body {
        background: $widget-color-white;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        padding: $widget-space-md-size;
        overflow: hidden;
    }

    .widget-sparkline-chart {
        width: 25%;
        float: left;
        border-left: 1px solid #e7eff7;
        padding: 0 15px;

        &:first-child {
            border-left: none;
        }

        .widget-sparkline-title {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: $widget-color-heading;
        }
    }
}

/* Widget Map for max-width 480px */
@media (max-width: $screen-xs-min) { /* 480px */
    .widget-map {
        .widget-sparkline-chart {
            width: 50%;
            border-left: none;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
}

/*** Widget Subscribe ***/
.widget-subscribe {
    border-radius: $general-border-radius;
    min-height: $widget-height-size-xs;
    overflow: hidden;
    padding: $widget-space-lg-size;

    .widget-subscribe-no {
        float: left;
        font-size: 67px;
        font-weight: 600;
        line-height: 1;
        color: $widget-color-purple;
    }

    .widget-subscribe-title {
        font-size: 25px;
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 15px 45px;
    }

    .widget-subscribe-subtitle {
        font-size: 15px;
        font-weight: 600;
    }

    .widget-subscribe-subtitle-link {
        color: #cab0dd;
    }

    &.widget-subscribe-quote {
        position: relative;

        &:before {
            position: absolute;
            top: 2px;
            font-size: 70px;
            color: $widget-color-white;
            content: "\201C";
        }
    }
}

/* Widget Subscribe for media queries */
@media (max-width: $screen-xs-max) {  /* 767px */
    .widget-subscribe {
        &.widget-subscribe-border {
            border-top: 1px solid #f5f8fb;
            border-bottom: 1px solid #f5f8fb;
            border-right: none;
        }
    }
}

@media (min-width: $screen-sm-min) {  /* 768px */
    .widget-subscribe {
        &.widget-subscribe-border {
            border-left: 1px solid #f5f8fb;
            border-right: 1px solid #f5f8fb;
        }
    }
}

@media (min-width: $screen-xs-max) and (max-width: $screen-sm-max) {  /* 767px & 991px */
    .widget-subscribe {
        &.widget-subscribe-border {
            border-left: none;
        }

        &.widget-subscribe-border-top {
            border-top: 1px solid #f5f8fb;
        }
    }
}


/*--------------------------------------------------
    [Material Design]
----------------------------------------------------*/

.page-md {
    .widget-bg-color-white,
    .widget-map,
    .widget-carousel,
    .widget-progress-element,
    .widget-socials,
    .widget-blog {
        box-shadow: $general-shadow;
    }
}