@widget-spacing: 20px;

.xe-widget {
	position: relative;
	
	// Counters
	&.xe-counter {
		background: #fff;
		padding: @base-margin + 8;
		line-height: 1;
		display: table;
		width: 100%;
		margin-bottom: @widget-spacing;
		
		.xe-icon,
		.xe-label {
			display: table-cell;
			vertical-align: middle;
			padding: @base-margin - 2;
		}
		
		.xe-icon {
			width: 1%;
			
			i {
				@s: 50px;
				
				display: block;
				background: @secondary-color;
				color: #fff;
				text-align: center;
				font-size: 25px;
				line-height: @s;
				.size(@s);
				.border-radius(50%);
			}
			
			+ .xe-label {
				padding-left: 0;
			}
		}
		
		.xe-label {
			
			.num {
				display: block;
				font-size: 28px;
				font-weight: normal;
				color: darken(@main-text-color, 35%);
			}
			
			span {
				display: block;
				font-style: normal;
				font-size: @font-size-small - 2;
				text-transform: uppercase;
				color: @main-text-color;
				margin-top: @base-padding/2;
			}
			
			+ .xe-icon {
				padding-left: 0;
			}
		}
		
		&.xe-counter-primary { .xe-counter-variant(@brand-primary, #fff); }
		&.xe-counter-success { .xe-counter-variant(@brand-success, #fff); }
		&.xe-counter-warning { .xe-counter-variant(@brand-warning, #fff); }
		&.xe-counter-info { .xe-counter-variant(@brand-info, #fff); }
		&.xe-counter-danger { .xe-counter-variant(@brand-danger, #fff); }
		&.xe-counter-blue { .xe-counter-variant(@xe-blue, #fff); }
		&.xe-counter-red { .xe-counter-variant(@xe-red, #fff); }
		&.xe-counter-purple { .xe-counter-variant(@xe-purple, #fff); }
		&.xe-counter-orange { .xe-counter-variant(@xe-orange, #fff); }
		&.xe-counter-yellow { .xe-counter-variant(@xe-yellow, #fff); }
		&.xe-counter-turquoise { .xe-counter-variant(@xe-turquoise, #fff); }
		&.xe-counter-white { .xe-counter-variant(#fff, darken(@main-text-color, 30%)); .xe-icon i { border: 1px solid @default-border-color; } }
		&.xe-counter-gray { .xe-counter-variant(@xe-gray, #555); }
		&.xe-counter-pink { .xe-counter-variant(@xe-pink, #fff); }
	}
	
	&.xe-counter-block {
		color: #fff;
		background: @secondary-color;
		margin-bottom: @widget-spacing;
		
		.xe-upper {
			&:extend(.xe-widget.xe-counter all);
			margin: 0;
			border-spacing: 0;
			border: 0;
			background: @secondary-color;
			
			.xe-icon,
			.xe-label {
				padding-bottom: 0;
			}
			
			.xe-icon {
				text-align: center;
				
				i {
					background: @secondary-color;
					font-size: 32px;
				}
			}
			
			.xe-label {
				
				.num {
					color: #fff;
				}
				
				span {
					color: fade(#fff, 70%);
				}
			}
		}
		
		.xe-lower {
			padding: @default-padding/2 @default-padding;
			
			.border {
				height: 1px;
				background: fade(#fff, 50%);
				margin-bottom: @base-padding;
			}
			
			span, strong {
				font-size: @font-size-small - 2;
				text-transform: uppercase;
				display: block;
			}
			
			span {
				color: fade(#fff, 70%);
			}
			
			strong {
				font-weight: normal;
			}
		}
		
		&.xe-counter-block-primary { .xe-counter-block-variant(@brand-primary; #fff); }
		&.xe-counter-block-success { .xe-counter-block-variant(@brand-success; #fff); }
		&.xe-counter-block-warning { .xe-counter-block-variant(@brand-warning; #fff); }
		&.xe-counter-block-danger { .xe-counter-block-variant(@brand-danger; #fff); }
		&.xe-counter-block-info { .xe-counter-block-variant(@brand-info; #fff); }
		&.xe-counter-block-purple { .xe-counter-block-variant(@xe-purple; #fff); }
		&.xe-counter-block-blue { .xe-counter-block-variant(@xe-blue; #fff); }
		&.xe-counter-block-red { .xe-counter-block-variant(@xe-red; #fff); }
		&.xe-counter-block-orange { .xe-counter-block-variant(@xe-orange; #fff); }
		&.xe-counter-block-turquoise { .xe-counter-block-variant(@xe-turquoise; #fff); }
		&.xe-counter-block-pink { .xe-counter-block-variant(@xe-pink; #fff); }
		&.xe-counter-block-yellow { .xe-counter-block-variant(@xe-yellow; #fff); }
		&.xe-counter-block-gray { .xe-counter-block-variant(darken(@xe-gray, 10%), #666); }
		&.xe-counter-block-white { .xe-counter-block-variant(#fff; darken(@main-text-color, 30%)); }
	}
	
	
	// Progress Counter
	&.xe-progress-counter {
		position: relative;
		color: #fff;
		background: @secondary-color;
		margin-bottom: @widget-spacing;
		overflow: hidden;
		&:extend(.xe-widget.xe-counter-block all);
		
		.xe-background {
			position: absolute;
			left: -40%;
			bottom: -10%;
			color: #fff;
			font-size: 150px;
			.opacity(.1);
			
			i {
				line-height: 1;
				display: block;
			}
		}
		
		.xe-upper {
			
			.xe-icon {
				
				i {
					font-size: 28px;
					background: none;
				}
			}
			
			.xe-label {
				
				span {
					padding: 0;
					padding-bottom: @base-padding/2;
				}
				
				.num {
					font-size: 20px;
				}
			}
		}
		
		.xe-progress {
			height: 2px;
			position: relative;
			background: fade(#000, 10%);
			margin: 0 @default-padding;
			margin-top: @base-padding;
			
			.xe-progress-fill {
				position: absolute;
				display: block;
				left: 0;
				top: 0;
				bottom: 0;
				background: #fff;
			}
		}
		
		&.xe-progress-counter-primary { .xenon-progress-counter-variant(@brand-primary; #fff); }
		&.xe-progress-counter-success { .xenon-progress-counter-variant(@brand-success; #fff); }
		&.xe-progress-counter-info { .xenon-progress-counter-variant(@brand-info; #fff); }
		&.xe-progress-counter-danger { .xenon-progress-counter-variant(@brand-danger; #fff); }
		&.xe-progress-counter-warning { .xenon-progress-counter-variant(@brand-warning; #fff); }
		&.xe-progress-counter-pink { .xenon-progress-counter-variant(@xe-pink; #fff); }
		&.xe-progress-counter-turquoise { .xenon-progress-counter-variant(@xe-turquoise; #fff); }
		&.xe-progress-counter-red { .xenon-progress-counter-variant(@xe-red; #fff); }
		&.xe-progress-counter-orange { .xenon-progress-counter-variant(@xe-orange; #fff); }
		&.xe-progress-counter-yellow { .xenon-progress-counter-variant(@xe-yellow; #fff); }
		&.xe-progress-counter-purple { .xenon-progress-counter-variant(@xe-purple; #fff); }
	}
	
	
	// Vertical Counter
	&.xe-vertical-counter {
		background: @secondary-color;
		padding: @base-margin;
		padding-top: @base-margin * 2;
		margin-bottom: @widget-spacing;
		color: #fff;
		
		.xe-icon {
			font-size: 75px;
			text-align: center;
			padding-bottom: @default-padding/2;

			i {
				display: block;
				line-height: 1.4;
			}
		}
		
		.xe-label {
			padding-top: @default-padding/2;
			text-align: center;
			
			.num {
				display: block;
				font-weight: normal;
				font-size: @font-size-h3;
			}
			
			span {
				display: block;
				padding-top: @base-padding/2;
				text-transform: uppercase;
				font-size: @font-size-base - 1;
				color: fade(#fff, 95%);
			}
		}
		
		&.xe-vertical-counter-primary { .xenon-vertical-counter-variant(@brand-primary; #fff); }
		&.xe-vertical-counter-success { .xenon-vertical-counter-variant(@brand-success; #fff); }
		&.xe-vertical-counter-danger { .xenon-vertical-counter-variant(@brand-danger; #fff); }
		&.xe-vertical-counter-warning { .xenon-vertical-counter-variant(@brand-warning; #fff); }
		&.xe-vertical-counter-info { .xenon-vertical-counter-variant(@brand-info; #fff); }
		&.xe-vertical-counter-purple { .xenon-vertical-counter-variant(@xe-purple; #fff); }
		&.xe-vertical-counter-orange { .xenon-vertical-counter-variant(@xe-orange; #fff); }
		&.xe-vertical-counter-red { .xenon-vertical-counter-variant(@xe-red; #fff); }
		&.xe-vertical-counter-blue { .xenon-vertical-counter-variant(@xe-blue; #fff); }
		&.xe-vertical-counter-turquoise { .xenon-vertical-counter-variant(@xe-turquoise; #fff); }
		&.xe-vertical-counter-pink { .xenon-vertical-counter-variant(@xe-pink; #fff); }
		&.xe-vertical-counter-yellow { .xenon-vertical-counter-variant(@xe-yellow; #fff); }
		&.xe-vertical-counter-gray { .xenon-vertical-counter-variant(darken(@xe-gray, 10%); #555); }
		&.xe-vertical-counter-white { .xenon-vertical-counter-variant(#fff; darken(@main-text-color, 30%)); }
	}
	
	
	// Todo List
	&.xe-todo-list {
		background: #fff;
		padding: @base-margin+5 @default-padding;
		margin-bottom: @widget-spacing;
		
		.xe-header {
			display: table;
			width: 100%;
			border-bottom: 1px solid #eee;
			margin-bottom: @default-padding/2;
			
			.xe-icon,
			.xe-label {
				display: table-cell;
				vertical-align: top;
				padding-bottom: @base-margin;
			}
			
			.xe-icon {
				width: 1%;
				
				i {
					display: block;
					line-height: 1;
					font-size: 28px;
				}
			}
			
			.xe-label {
				padding-left: @default-padding/2;
				
				span, strong {
					display: block;
					line-height: 1.1;
				}
				
				span {
					font-size: @font-size-small;
					.opacity(.8);
				}
				
				strong {
					font-size: @font-size-base + 2;
				}
			}
		}
		
		.xe-body {
			padding-top: @base-padding/2;
			padding-bottom: @base-padding;
			
			label {
				.user-select(none);
				
				> span {
					position: relative;
					display: inline-block;
					color: darken(@main-text-color, 10%);
				}
			}
			
			li {
				margin: 2px 0;
				
				&.done {
					
					label {
						
						> span {
							.opacity(0.5);
							//color: @main-text-color;
							
							&:after {
								display: block;
								position: absolute;
								left: 0;
								right: 0;
								top: 9px;
								height: 1px;
								background: darken(@main-text-color, 5%);
								content: '';
							}
						}
					}
				}
			}
		}
		
		&.xe-todo-list-primary { .xenon-todo-list-variant(@brand-primary; #fff); }
		&.xe-todo-list-success { .xenon-todo-list-variant(@brand-success; #fff); }
		&.xe-todo-list-warning { .xenon-todo-list-variant(@brand-warning; #fff); }
		&.xe-todo-list-danger { .xenon-todo-list-variant(@brand-danger; #fff); }
		&.xe-todo-list-info { .xenon-todo-list-variant(@brand-info; #fff); }
		&.xe-todo-list-secondary { .xenon-todo-list-variant(@secondary-color; #fff); }
		&.xe-todo-list-turquoise { .xenon-todo-list-variant(@xe-turquoise; #fff); }
		&.xe-todo-list-pink { .xenon-todo-list-variant(@xe-pink; #fff); }
		&.xe-todo-list-red { .xenon-todo-list-variant(@xe-red; #fff); }
		&.xe-todo-list-blue { .xenon-todo-list-variant(@xe-blue; #fff); }
		&.xe-todo-list-purple { .xenon-todo-list-variant(@xe-purple; #fff); }
		&.xe-todo-list-yellow { .xenon-todo-list-variant(@xe-yellow; #fff); }
	}
	
	
	// Status Update
	&.xe-status-update {
		background: #55acee;
		color: #fff;
		margin-bottom: @widget-spacing;
		padding: @default-padding;
		padding-bottom: @base-margin;
		
		.xe-header {
			display: table;
			width: 100%;
			
			.xe-icon,
			.xe-nav {
				display: table-cell;
				vertical-align: top;
				color: #fff;
				padding-bottom: @base-margin;
			}
			
			.xe-icon {
				
				i {
					font-size: 48px;
				}
			}
			
			.xe-nav {
				text-align: right;
				
				a {
					position: relative;
					margin-right: -@base-padding;
					margin-top: -@base-padding;
					color: #fff;
					padding: 0 @base-padding - 2;
					display: inline-block;
					line-height: 32px;
					//&:extend(.transall);
					
					&:hover {
						background: fade(#fff, 10%);
					}
					
					+ a {
						margin-left: @base-padding;
					}
				}
			}
		}
		
		.xe-body {
			
			li {
				display: none !important;
					
				.status-date {
					display: block;
					font-size: @font-size-base + 3;
					.opacity(.5);
					padding-bottom: @base-padding;
				}
				
				p {
					font-size: @font-size-base + 1;
					color: #fff;
					.opacity(.8);
				}
				
				&.active {
					display: block !important;
				}
			}
		}
		
		.xe-footer {
			text-transform: uppercase;
			font-size: @font-size-small - 1;
			padding-top: @default-padding/2;
			
			a {
				color: #fff;
				.opacity(.8);
				
				&:hover {
					.opacity(1);
				}
			}
		}
		
		&.xe-status-update-facebook { .xenon-status-update-variant(#3b5998); }
		&.xe-status-update-google-plus { .xenon-status-update-variant(#dd4b39); }
	}
	
	
	// Single News
	&.xe-single-news {
		margin-bottom: @widget-spacing;
		position: relative;
		
		.xe-image {
		
			img {
				display: block;
				width: 100%;
			}
			
			.xe-gradient {
				position: absolute;
				left: 0; right: 0; top: 0; bottom: 0;
				.background-image(linear-gradient(to top, #000 0%, fade(#000,5%) 100%));
				&:extend(.transall);
			}
		}
		
		.xe-details {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: @base-margin;
			
			.category {
				font-size: @font-size-small - 1;
				text-transform: uppercase;
				margin-bottom: @base-padding;
				
				a {
					color: #fff;
					.opacity(.5);
					
					&:hover {
						.opacity(1);
					}
				}
			}
				
			h3 {
				margin: 0;
				padding: 0;
				margin-bottom: @base-padding;
				font-size: @font-size-h3 - 4;
				
				a {
					color: #fff;
					.opacity(.8);
					
					&:hover {
						.opacity(1);
					}
				}
			}
			
			time {
				position: relative;
				display: block;
				color: #fff;
				font-size: @font-size-base;
				margin-bottom: -20px;
				.transition(~"all 350ms cubic-bezier(0.175, 0.885, 0.320, 1.275)");
				.opacity(0);
			}
		}
	
		&:hover {
			
			.xe-details {
				
				time {
					margin-bottom: 0;
					.opacity(.7);
				}
			}
		}
	}
	
	
	// Conversations
	&.xe-conversations {
		position: relative;
		background: #fff;
		margin-bottom: @widget-spacing;
		padding: @default-padding;
		
		.xe-bg-icon {
			position: absolute;
			right: @base-margin;
			top: @base-margin;
			
			i {
				font-size: 80px;
				display: block;
				line-height: 1;
				.opacity(.1);
			}
		}
		
		.xe-header {
			display: table;
			width: 100%;
			border-bottom: 1px solid #eee;
			
			.xe-icon,
			.xe-label {
				display: table-cell;
				vertical-align: middle;
				padding-bottom: @base-margin;
			}
			
			.xe-icon {
				width: 1%;
				
				i {
					display: block;
					line-height: 1;
					font-size: 37px;
				}
			}
			
			.xe-label {
				padding-left: @base-padding;
				
				h3 {
					display: block;
					margin: 0;
					padding: 0;
					
					small {
						padding-top: @base-padding/2;
						font-size: @font-size-base;
						display: block;
						.opacity(.5);
					}
				}
			}
		}
		
		.xe-body {
			border-bottom: 1px solid #eee;
			
			.xe-user-img {
				float: left;
				display: block;
				padding-right: @base-padding;
			}
			
			.xe-comment-entry {
				display: table;
				width: 100%;
				
				.xe-user-img,
				.xe-comment {
					display: table-cell;
					vertical-align: top;
					padding-top: @base-padding;
					padding-bottom: @base-padding;
				}
				
				.xe-user-img {
					
					img {
						display: block;
					}
				}
				
				.xe-comment {
					width: 99%;
					padding-left: @base-padding/2 + 5;
					
					.xe-user-name {
						display: block;
						margin-bottom: @base-padding/2;
						
						&:hover strong {
							color: darken(@main-text-color, 10%);
						}
					}
					
					p {
						font-size: @font-size-small;
					}
				}
			}
			
			ul {
				
				> li {
					margin: @base-padding 0;
					border-bottom: 1px solid #eee;
					
					&:last-child {
						border-bottom: 0;
					}
				}
			}
		}
		
		.xe-footer {
			
			a {
				margin-top: @base-margin;
				display: block;
				font-size: @font-size-small - 1;
				color: darken(@main-text-color, 10%);
				text-align: center;
				text-transform: uppercase;
				
				&:hover {
					color: darken(@main-text-color, 20%);
				}
			}
		}
	}
	
	
	// Weather
	&.xe-weather {
		position: relative;
		background: #459ec4;
		color: #fff;
		overflow: hidden;
		margin-bottom: @widget-spacing;
		&:extend(.clearfix all);
		
		.xe-background {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
			
			img {
				display: block;
				line-height: 1;
				width: 100%;
				position: relative;
			}
			
			&.xe-background-animated {			
				left: -10%;
				top: -20%;
					
				img {
					width: 120%;
					.animation(weatherBgMove 10s infinite linear);
					.animation-direction(alternate);
				}
				
				.keyframes(~"weatherBgMove, 0% { left: 0%; } 50% { left: 10%; } 100% { left: 0%; }");
			}
			
			@media screen and (max-width: @screen-sm){
				top: auto;
				bottom: 0;
				
				&.xe-background-animated {
					top: auto;
					bottom: 0;
				}
			}
		}
		
		@weekdays-width: 35%;
		
		.xe-current-day {
			position: absolute;
			z-index: 2;
			right: @weekdays-width;
			top: 0;
			left: 0;
			bottom: 0;
			padding: @default-padding;
			
			.xe-now {
				margin-bottom: @base-margin;
				&:extend(.clearfix all);
				
				.xe-temperature {
					display: table;
					float: left;
					
					.xe-icon,
					.xe-label {
						display: table-cell;
						vertical-align: middle;
					}
					
					.xe-icon {
						
						i {
							display: block;
							line-height: 1;
							font-size: 35px;
						}
					}
					
					.xe-label {
						padding-left: @base-padding;
						line-height: 1;
						text-transform: uppercase;
						color: fade(#fff, 80%);
						font-size: @font-size-small - 1;
						
						strong {
							display: block;
							padding-top: 2px;
							font-size: @font-size-h3;
							line-height: 1;
							color: #fff;
							font-weight: normal;
						}
					}
				}
				
				.xe-location {
					float: right;
					text-align: right;
					
					h4 {
						margin: 0;
						padding-bottom: @base-padding/2;
						color: fade(#fff, 95%);
					}
					
					time {
						color: fade(#fff, 80%);
						font-size: @font-size-small;
					}
				}
			}
			
			.xe-forecast {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 0 @default-padding;
				padding-bottom: @default-padding;
				
				ul {
					list-style: none;
					padding: 0;
					margin: 0;
					display: table;
					width: 100%;
					
					> li {
						position: relative;
						display: table-cell;
						vertical-align: middle;
						width: 1%;
						
						&:after {
							content: '';
							display: block;
							width: 1px;
							top: 32px;
							left: 0;
							bottom: 0;
							background: fade(#fff, 25%);
							position: absolute;
						}
							
						&:first-child:after {
							display: none;
						}
					}
				}
				
				.xe-forecast-entry {
					text-align: center;
					
					time {
						display: inline-block;
						background: fade(#000, 15%);
						padding: 5px 5px;
						line-height: 1;
						color: fade(#fff, 70%);
						font-size: @font-size-small - 1;
						&:extend(.transall);
					}
					
					.xe-icon {
						
						i {
							display: block;
							line-height: 42px;
							font-size: 20px;
						}
					}
					
					.xe-temp {
						display: block;
						font-weight: normal;
						font-size: @font-size-base + 1;
						color: fade(#fff, 85%);
					}
					
					&:hover {
						
						time,
						.xe-temp {
							color: #fff;
						}
					}
				}
			}
			
			
			
			@media screen and (max-width: @screen-sm) {
				position: relative;
				width: 100%;
				
				.xe-forecast {
					position: relative;
					margin-top: 90px;
					padding: 0;
				}
			}
		}
		
		.xe-weekdays {
			float: right;
			position: relative;
			z-index: 2;
			background: fade(#000, 5%);
			padding: @default-padding/2 @default-padding;
			width: @weekdays-width;
			
			ul {
				
				> li {
					position: relative;
					
					&:after {
						content: '';
						display: block;
						position: absolute;
						right: 0;
						left: 0;
						bottom: 0;
						height: 1px;
						background: fade(#fff, 25%);
					}
					
					&:last-child:after {
						display: none;
					}
				}
			}
			
			
			.xe-weekday-forecast {
				display: table;
				width: 100%;
				cursor: default;
				
				.xe-temp,
				.xe-day,
				.xe-icon {
					display: table-cell;
					vertical-align: middle;
					padding: @default-padding/2 0;
				}
				
				.xe-temp {
					width: 20%;
					font-size: 14px;
					color: fade(#fff, 50%);
					&:extend(.transall);
				}
				
				.xe-icon {
					text-align: right;
					font-size: 20px;
					
					i {
						display: block;
						line-height: 1;
					}
				}
				
				&:hover {
					
					.xe-temp {
						color: fade(#fff, 95%);
					}
				}
			}
			
			@media screen and (max-width: @screen-sm) {
				float: none;
				width: 100%;
				
				.xe-weekday-forecast {
					
					.xe-temp {
						width: 10%;
					}
				}
			}
		}
	}
	
	
	// Map
	&.xe-map-stats {
		background: #385868;
		color: #fff;
		margin-bottom: @widget-spacing;
		display: table;
		width: 100%;
		&:extend(.clearfix all);
		
		@details-width: 35%;
		
		.xe-map,
		.xe-details {
			display: table-cell;
			vertical-align: top;
		}
		
		.xe-map {
			width: 100% - @details-width;
			position: relative;
			
			> div {
				@spacing: @default-padding - 10;
				
				position: absolute;
				top: @spacing;
				bottom: @spacing;
				left: @spacing;
				right: @spacing;
				
				.jvectormap-zoomin,
				.jvectormap-zoomout {
					.size(22px);
					line-height: 22px - 2;
					padding: 0;
					border: 0;
					
					&.jvectormap-zoomout {
						top: 32px;
						border-top: 1px solid fade(#ccc, 80%);
					}
				}
			}
		}
		
		.xe-details {
			width: @details-width;
			background: fade(#000, 30%);
			padding: @default-padding;
			
			> .xe-label {
				
				h3 {
					margin: 0;
				}
				
				p {
					margin: 0;
					padding-top: @base-padding/2;
					color: fade(#fff, 80%);
				}
			}
			
			ul {
				margin-top: @base-margin;
				
				li {
					position: relative;
					padding: @base-padding @base-padding/2;
					border-top: 1px solid fade(#fff, 10%);
				}
			}
			
			.xe-map-data {
				display: block;
				
				.label {
					display: inline-block;
					text-align: center;
					min-width: 30px;
					margin-right: @base-padding/2;
					vertical-align: middle;
				}
				
				.xe-label {
					font-size: @font-size-base + 1;
				}
			}
		}
		
		@media screen and (max-width: @screen-sm){
			display: block;
			
			.xe-map {
				min-height: 300px;
			}
			
			.xe-map,
			.xe-details {
				width: 100%;
				display: block;
			}
		}
	}
}


.xe-counter-variant(@bg-color; @text-color)
{
	.xe-icon {
		
		i {
			background-color: @bg-color;
			color: @text-color;
		}
	}
}

.xe-counter-block-variant(@bg-color; @text-color)
{
	background: @bg-color;
	
	.xe-upper {
		background: @bg-color;
		
		.xe-icon i {
			background-color: @bg-color;
			color: @text-color;
		}
		
		.xe-label {
			
			.num {
				color: @text-color;
			}
			
			span {
				color: fade(@text-color, 70%);
			}
		}
	}
		
	.xe-lower {

		.border {
			background: fade(@text-color, 50%);
		}
		
		span {
			color: fade(@text-color, 70%);
		}
		
		strong {
			color: @text-color;
		}
	}
}

.xenon-progress-counter-variant(@bg-color; @text-color)
{
	background-color: @bg-color;
		
	.xe-background {
		color: @text-color;
	}
	
	.xe-upper {
		background-color: transparent;
	}
}

.xenon-vertical-counter-variant(@bg-color; @text-color)
{
	background: @bg-color;
	color: @text-color;
		
	.xe-label {

		span {
			color: fade(@text-color, 95%);
		}
	}
}

.xenon-todo-list-variant(@bg-color; @text-color)
{
	@pct: 70%;
	
	background: @bg-color;
	color: @text-color;
	
	.xe-header {
		border-bottom: 1px solid fade(@text-color, @pct);
	}
	
	.xe-body {
		
		.cbr-replaced {
			
			.cbr-state {
				border: 1px solid fade(@text-color, @pct);
			}
		}
			
		label {
			
			> span {
				color: @text-color;
			}
		}
			
		li {
			
			&.done {
				
				label {
					
					> span {
						.opacity(.8);
						
						&:after {
							background: fade(@text-color, @pct);
						}
					}
				}
			}
		}
	}
	
	.xe-footer {
		
		.form-control {
			background: transparent;
			border: 1px solid fade(@text-color, @pct);
			color: @text-color;
			.placeholder(fade(@text-color, 90%));
		}
	}
}

.xenon-status-update-variant(@bg-color)
{
	background-color: @bg-color;
}