_theme.scss

$background-color: $background;
$label-font-color: $thm-grey;
$label-font-weight: normal;
$label-text-shadow: none;

@mixin label-config {
	font-weight: $label-font-weight;
	text-shadow: $label-text-shadow !important; 
}

$button-confirm-bg-color: $thm-green;
$button-confirm-txt-color: #fff;
$button-action-bg-color: $thm-grey;
$button-action-active-bg-color: $thm-lightgrey;
$button-action-txt-color: #fff;
$button-decline-bg-color: $thm-red;
$button-decline-txt-color: #fff;

@mixin button-decoration-config($bgcolor, $txtcolor) {
	color: $txtcolor;
	background: $bgcolor;
	border: none !important;
	background-image: none !important;
}

$toolbar-bg-color: $thm-grey;
$toolbar-title-txt-color: #fff;
$toolbar-speaker-title-color: $thm-green;
$toolbar-button-bg-color: $thm-green;
$toolbar-button-txt-color: #fff;
$toolbar-back-button-bg-color: #fff;
$toolbar-back-button-txt-color: $thm-grey;
$toolbar-toogleCorrect-button-active-color: $thm-green;
$toolbar-toogleCorrect-button-inactive-color: $thm-lightgrey;

@mixin toolbar-title-config {
	@include label-config;
	color: $toolbar-title-txt-color;
}

@mixin toolbar-button-config($bgcolor, $txtcolor) {
	color: $txtcolor;
	background: $bgcolor !important;
	border: 1px solid $bgcolor !important;
}

.iconBtn {
	background: white;
	color: $thm-grey !important;
	
	&.x-button-pressing {
		background-image: none;
		background-color: #c4c4c4;
	}
}

.thmlink,
.x-button .courseIcon,
.answerListButton .x-button-label,
.forwardListButton .x-button-label,
.standardListButton .x-button-label {
	color: $thm-grey;
}

.x-segmentedbutton .x-button-normal {
	background-image: none !important;
}

.myCoursesList {
	.x-inner,
	.x-scroll-container {
		background-color: #E0E0E0;
	}
}

.forwardListButton, .standardListButton {
	border: 1px solid $background !important;
}

.gravure {
	text-shadow: none !important;
}

.x-fullscreen {
	background-color: $background;
}

.x-msgbox .x-panel-inner {
	background: none;
}

.x-form-label {
	color: $label-font-color;
	background-color: white;
	border-right: 1px solid $background;
	
	&.checkItem {
		border-right: none;
	}
	
	& span {
		font-weight: normal;	
	}
}

.x-form-fieldset .x-field {
	border-bottom: 1px solid $background;
}

.x-list-item, .x-form-fieldset-title, .x-label, .roundedBox, .centerText {
	text-shadow: none !important;
	
	.x-innerhtml {
		color: $thm-grey !important;
	}
} 

.x-field-input .x-input-el {
	color: $thm-grey !important;
	-webkit-text-fill-color: initial !important;
}

.disableDefault {
	.thm-grey, .x-form-label span {
		color: $thm-grey !important;
		-webkit-text-fill-color: initial !important;
	}
}

.x-msgbox {
	color: $thm-grey;
	box-shadow: 0 0 8px 0;
	background: $background;
	border-color: $thm-grey;
	max-width: 21em;
	
	.x-title, 
	.x-msgbox-text {
		color: $thm-grey;
		text-shadow: none;
	}
	
	.x-msgbox-buttons .x-button-normal span {
		opacity: 1;
	}
}

.x-button {
	&.x-button-confirm {
		@include button-decoration-config(
			$button-confirm-bg-color !important, 
			$button-confirm-txt-color !important
		);
	}
	
	&.x-button-action,
	&.x-button-filebrowse {
		@include button-decoration-config(
			$button-action-bg-color !important, 
			$button-action-txt-color !important
		);
		
		&.x-button-pressed,
		&.x-button-pressing {
			background-color: $button-action-active-bg-color !important;
		}
	}
	
	&.x-button-decline {
		@include button-decoration-config(
			$button-decline-bg-color !important, 
			$button-decline-txt-color !important
		);
	}
	
	.x-button-label {
		@include label-config;
	}
	
	&.isInactive .x-button-label {
		color: $thm-red !important;
	}
}

.x-segmentedbutton .x-button.x-button-action {
	border: none !important;
	border-right: thin solid $background-color !important;
}

.x-tabbar-dark,
.x-toolbar-light {
	border: none !important;
	text-shadow: none !important;
	background: $toolbar-bg-color !important;
}

.x-toolbar-light {
	.x-title {
		@include toolbar-title-config;
	}
	
	&.speakerTitleText .x-title {
		color: $toolbar-speaker-title-color;
	}
	
	.x-button-normal {
		@include toolbar-button-config(
			$toolbar-button-bg-color, 
			$toolbar-button-txt-color
		);
		
		&.toggleCorrectButton {
			@include toolbar-button-config(
				$toolbar-toogleCorrect-button-inactive-color,
				$toolbar-button-txt-color
			);
			
			&.x-button-pressed,
			&.x-button-pressing {
				@include toolbar-button-config(
					$toolbar-toogleCorrect-button-active-color,
					$toolbar-button-txt-color
				);
			}
		}
	}
	
	.x-button-back,
	.x-button.x-button-back:after, 
	.x-button.x-button-back:before,
	.x-button.x-button-forward:after,
	.x-button.x-button-forward:before, 
	.x-field-select .x-input-text.x-button-back:after, 
	.x-field-select .x-input-text.x-button-forward:after {
		@include toolbar-button-config(
			$toolbar-back-button-bg-color, 
			$toolbar-back-button-txt-color
		);
	}
	
	.x-button, .x-button-back {
		.x-button-label {
			@include label-config;
		}
	}
}

.x-tabbar-dark.x-docked-bottom {
	.x-tab {
		text-shadow: none !important;
	}
	
	.voteIcons:before,
	.x-button-icon:before {
		color: #fff;
	}
	
	.x-tab-active {
		box-shadow: none;
		background-image: none !important;
		background-color: transparent;
		
		.x-button-icon {
			&:before,
			&.voteIcons.icon-bullhorn:before {
				color: $thm-green;
			}
			
			&.voteIcons:before {
				color: $smiley-color;
			}
		}
	}
}

.x-list,
.x-list-normal {
	.x-list-header {
		color: white !important;
		border: none !important;
		text-shadow: none !important;
		background-color: $thm-lightgrey !important;
		background-image: none !important;
		-webkit-box-shadow: none !important;
	}
	
	.x-list-item.x-item-selected.x-list-item-tpl,
	.x-list-item.x-item-selected .x-dock-horizontal {
		border-color: white;
		background-image: none;
		background-color: $thm-orange;
		
		.search-item span {
			color: white;
		}
	}
} 

.x-form-fieldset-title {
	font-weight: normal;
}

.x-carousel-indicator span {
	background-color: $thm-grey;
	
	&.x-carousel-indicator-active {
		background-color: $thm-green;
	}
}

.isInactive {
	color: $thm-red;
}