$theme-name: 'hc-dark';

$ui-transitions: false;

// Notification & Alert
$red: #ff5050;

$orange: #ff7800;

$dark-yellow: #ffa20d;
$yellow: #a78820;
$lighter-yellow: #222222;

$green: #23d545;
$lighter-green: #44e763;

$blue: #ffffff;

$white: #000000 !important;

$disabled-bg-color: #000000;
$disabled-item-color: #b5b5b5;
$disabled-item-bg-color: #383838;

// Layout
$header-bg-color: #070707;
$sidebar-bg-color: #ffffff;

$sidebar-mode-icon-color: #404040;
$sidebar-mode-icon-hover-color: #000000;

// Main
$font-color: #ffffff;
$font-selected-color: #000000;
$ui-selected-color: #000000;
$ui-selected-hover-color: #000000;

$font-alt-color: #cacaca;
$body-bg-color: #111111;
$overlay-bg-color: #222222;
$overlay-border-color: #666666;

// Main menu
$menu-main-icon-color: #000000;
$menu-main-expanded-icon-color: #ffffff;

$menu-main-color: #000000;
$menu-main-hover-color: #ffffff;
$menu-main-hover-bg-color: #1a1a1a;
$menu-main-hover-border-color: transparent;

$menu-main-selected-color: #000000;
$menu-main-selected-bg-color: #ffffff;
$menu-main-selected-border-color: #0c0c0c;

$menu-main-expanded-color: #ffffff;
$menu-main-expanded-bg-color: #0c0c0c;

$menu-main-submenu-color: #0c0c0c;
$menu-main-submenu-bg-color: #cccccc;
$menu-main-submenu-border-color: #f3f3f3;

$menu-main-submenu-hover-bg-color: #1a1a1a;
$menu-main-submenu-hover-border-color: transparent;

$menu-main-submenu-selected-color: #ffffff;
$menu-main-submenu-selected-bg-color: #0c0c0c;
$menu-main-submenu-selected-border-color: #787878;

$menu-main-submenu-next-level-bg: #ffffff !default;
$menu-main-submenu-next-level-shadow: transparent !default;

$menu-user-icon-color: #000000;
$menu-user-expanded-icon-color: #ffffff;

$menu-user-color: #131619;
$menu-user-hover-color: #000000;
$menu-user-hover-border-color: #000000;
$menu-user-disabled-color: #787878;

$menu-user-submenu-color: #0c0c0c;
$menu-user-submenu-bg-color: #cccccc;
$menu-user-submenu-border-color: #f3f3f3;
$menu-user-submenu-hover-color: #ffffff;
$menu-user-submenu-hover-bg-color: #1a1a1a;
$menu-user-submenu-hover-border-color: transparent;
$menu-user-submenu-selected-color: #ffffff;
$menu-user-submenu-selected-bg-color: #0c0c0c;
$menu-user-submenu-selected-border-color: #787878;

$menu-user-submenu-next-level-bg: #ffffff !default;
$menu-user-submenu-next-level-shadow: transparent !default;

// Sidebar
$sidebar-server-name-color: #787878;

// UI
$ui-bg-color: #000000;
$ui-bg-selected-color: #dddddd;
$ui-hover-bg-color: #222222;
$ui-border-color: #444444;
$ui-placeholder-background-color: lighten($ui-hover-bg-color, 10%);
$ui-highlighted-parent-background-color: lighten($ui-hover-bg-color, 20%);

$action-hover-color: #454545;
$action-border-color: #666666;
$action-shadow-color: rgba(#000000, .5);

$table-border-color: #333333;

$ui-tab-bg-selected-color: #ffffff;

// Forms
$form-font-color: #e1e3ed;
$form-bg-color: #383838;
$form-border-color: #666666;
$form-focus-border-color: #bbbbbb;
$form-fields-group-border-color: #333333;

$form-disabled-font-color: #7d7d7d;
$form-disabled-bg-color: #000000;
$form-disabled-border-color: #5a5a5a;

$scrollbar-track-color: #1f1f1f;
$scrollbar-thumb-color: #999999;
$scrollbar-thumb-color-darken: 30%;

$input-placeholder-color: #bbbbbb;
$input-disabled-placeholder-color: darken($input-placeholder-color, 45%);

// Search form
$form-search-icon-color: #000000;
$form-search-icon-hover-color: #000000;
$form-search-icon-focus-color: #ffffff;
$form-search-color: #000000;
$form-search-bg-color: #ffffff;
$form-search-border-color: #000000;
$form-search-focused-color: #ffffff;
$form-search-focused-bg-color: #000000;
$form-search-focused-border-color: #000000;

// Buttons
$btn-color: #333333;
$btn-bg-color: #e0e0e0;
$btn-hover-bg-color: #d3d3d3;
$btn-focus-bg-color: #c7c7c7;
$btn-focus-border-color: #d3d3d3;
$btn-focus-outline-color: #ffffff;

$btn-alt-color: $font-color;

$btn-form-color: #f2f2f2;
$btn-form-hover-bg-color: #414141;

$btn-disabled-color: #7d7d7d;
$btn-disabled-bg-color: transparent;
$btn-disabled-border-color: #7d7d7d;

$btn-back-map-background-color: rgba(0, 0, 0, .8);
$btn-back-text-color: #ffffff;
$btn-back-background-hover: #8f8f8f;

// Links
$link-color: #f8f8f8;
$link-hover-color: #ffffff;
$link-active-color: #f8f8f8;
$link-visited-color: #f8f8f8;

$link-alt-underline-color: #818181;

// Icons
$icon-color: #dddddd;

$btn-icon-color: #7d7d7d;
$btn-icon-hover-color: #ffffff;
$btn-icon-disabled-color: #555555;

$icon-content-color: #000000;

// Error messages
$msg-bad-btn-color: $font-color;

// Analog clock
$clock-face-color: #000000;
$clock-hand-color: #ffffff;
$clock-hand-sec-color: #999999;
$clock-lines-color: #888888;

// Gauge arcs
$gauge-empty-color: #111111;
$gauge-fill-color: #ffffff;
$gauge-needle-fill-color: #ffffff;
$gauge-needle-stroke-color: rgba(0, 0, 0, 0.2);

// Pie chart.
$pie-chart-arc-no-data-color: #111111;

// Honeycomb.
$honeycomb-cell-color: #335463;
$honeycomb-no-data-cell-color: #111111;
$honeycomb-label-color: #eeeeee;
$honeycomb-no-data-label-color: #cacaca;

// Map.
$map-hover-fill-color: #3b3b3b;
$map-selected-fill-color: #575757;
$map-selected-stroke-color: #797676;

// Geomap.
$geomap-marker-hover-fill: #3b3b3b;
$geomap-marker-selected-fill: #575757;
$geomap-marker-selected-stroke: #797676;

// Statuses
$problem-unack-fg-color: #ff3333;
$problem-ack-fg-color: #ff3333;
$ok-unack-fg-color: #00ff00;
$ok-ack-fg-color: #00ff00;

$status-disabled-border-color: rgba(#ffffff, .2);

$status-grey-border-color: $status-disabled-border-color;

// Multiselect
$multiselect-selected-bg-color: #999999;

// List table.
$compact-view-color: $link-color;
$compact-view-tag-color: #000000;
$compact-view-tag-bg-color: $ui-bg-selected-color;

// Dashboard list table.
$dashboard-shared-bg-color: #e0e0e0;
$dashboard-my-bg-color: #e0e0e0;

// Import compare.
$toc-title-color: #000000;
$toc-title-bg-color: #dddddd;
$diff-added-bg-color: transparent;
$diff-removed-bg-color: transparent;

// Text
$text-placeholder-color: #000000;

// Change indicators.
$arrow-fill-up: #FFFFFF;
$arrow-fill-down: #FFFFFF;
$arrow-fill-up-down: #FFFFFF;

// Important! @import string should come after variables.
@import 'screen.scss';

// layout/sidebar
.sidebar {
	.logo {
		&:focus {
			.zabbix-logo-sidebar {
				box-shadow: 0 0 0 2px #000000;
			}
		}
	}

	button {
		&:focus {
			box-shadow: 0 0 0 2px #000000;
		}
	}

	&.is-compact:not(.is-opened) {
		.menu-main {
			& > li {
				&.is-selected {
					> a {
						background: $menu-main-expanded-bg-color;
						border-left-color: $menu-main-expanded-border-color;

						&::before {
							color: $menu-main-expanded-icon-color;
						}
					}
				}
			}
		}
	}
}

a.btn-icon,
.btn-icon {
	&:link,
	&:hover,
	&:focus,
	&:visited {
		border-bottom: none;
	}
}

// components/menu-user
.menu-user {
	a {
		&:link,
		&:visited {
			border-bottom: 0;
		}
	}
}

.form-search {
	.search {
		&:focus ~ .btn-icon {
			color: $form-search-icon-focus-color !important;
		}
	}

	.btn-icon {
		&:focus {
			color: $form-search-icon-color;

			&:hover {
				color: $form-search-icon-color;
			}
		}
	}
}

.dashboard-navigation-tabs {
	.sortable {
		li div:hover,
		li.sortable-item-dragging div {
			border: 1px solid transparent;
		}
	}
}

// Dashboard, widgets and iterators.
// To maintain code clarity:
//   - Do not mix rules for dashboard view mode and dashboard edit mode.
//   - Do not mix rules for widgets and iterators.

.dashboard-widget-placeholder {
	.dashboard-widget-placeholder-box {
		box-shadow: none;
		border-color: $font-color;
		background-color: transparent;
	}

	.dashboard-widget-placeholder-resizing {
		border: 2px dashed $font-color;
		box-shadow: none;
	}
}

.dashboard-grid-widget {
	&.dashboard-grid-widget-hidden-header {
		&.dashboard-grid-widget-focus {
			.dashboard-grid-widget-header {
				box-shadow: 0 -6px 8px -2px #000000;
			}
		}
	}
}

.dashboard-grid-iterator {
	&.dashboard-grid-iterator-focus {
		.dashboard-grid-iterator-header {
			box-shadow: 0 -6px 8px -2px #000000;
		}
	}
}

.dashboard.dashboard-is-edit-mode {
	.dashboard-grid-widget {
		&.ui-draggable-dragging {
			&.dashboard-grid-widget-hidden-header {
				.dashboard-grid-widget-header {
					box-shadow: 0 -6px 8px -2px #000000;
				}
			}
		}

		&.ui-resizable-resizing,
		&.ui-draggable-dragging {
			&::before {
				box-shadow: 0 4px 20px 2px #000000;
			}
		}
	}

	.dashboard-grid-iterator {
		&.ui-draggable-dragging {
			.dashboard-grid-iterator-header {
				box-shadow: 0 -6px 8px -2px #000000;
			}
		}

		&.ui-resizable-resizing,
		&.ui-draggable-dragging {
			&::before {
				box-shadow: 0 4px 20px 2px #000000;
			}

			.dashboard-grid-iterator-mask {
				border: 0;
			}
		}
	}

	.dashboard-grid-widget-placeholder > div {
		background-color: lighten($ui-bg-color, 12%);
	}
}

.dashboard-widget-graph-link {
	&:focus {
		&::after {
			background: $blue;
			height: 3px;
			bottom: -3px;
		}
	}
}

.subfilter-enabled {
	.link-action {
		color: $link-hover-color;

		&:focus {
			color: $link-hover-color;
			border-bottom: 3px solid $link-hover-color;
		}

		&:hover {
			color: $link-hover-color;
			border-bottom: 1px solid $link-hover-color;
		}
	}
}

.timeline-axis {
	border-right-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;

	&::before {
		background-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;
	}
}

.menu-popup {
	background-color: $form-bg-color;

	.menu-popup-item {
		&:hover,
		&:focus,
		&:active,
		&.highlighted {
			background-color: #000000;
			color: #ffffff;

			.arrow-right {
				border-left-color: #ffffff;
			}
		}

		&.disabled {
			color: $form-disabled-font-color;
		}
	}

	&.page-title-submenu::before {
		background-color: $form-bg-color;
	}
}

.header-navigation {
	li,
	> li:first-child {
		> span a:focus {
			margin-bottom: -2px;
		}
	}

	> li {
		> span a:focus {
			line-height: 12px;
		}
	}
}

.radio-list-control {
	.normal-bg,
	.average-bg,
	.disaster-bg,
	.high-bg,
	.info-bg,
	.na-bg,
	.warning-bg {
		&::before,
		&::after {
			display: none;
		}
	}

	li {
		[type="radio"] {
			&:checked:not([disabled]) + label {
				color: $white;
			}

			&:checked + label {
				background-color: $ui-bg-selected-color !important;
			}

			&:not([readonly]):focus + label {
				background-color: darken($btn-bg-color, 10%) !important;
				box-shadow: 0 0 0 2px $btn-focus-outline-color !important;
				color: $white;
			}

			&:checked[disabled] + label {
				background-color: #595959 !important;
			}
		}
	}
}

a {
	&:link {
		border-bottom: 1px solid rgba($link-hover-color, .5);
	}

	&:visited,
	&:hover {
		border-bottom: 1px solid $link-hover-color;
	}

	&:focus {
		border-bottom: 3px solid $link-hover-color;
	}
}

a.link-action {
	border-bottom: 1px dotted;
}

.link-action {
	&:hover {
		border-bottom-color: rgba($link-hover-color, .5);
	}

	&:active,
	&:focus {
		margin-bottom: -3px;
		color: $link-hover-color;
		border-bottom: 3px solid $link-hover-color;
	}
}

.link-alt {
	&:link,
	&:visited {
		border-bottom-color: $link-alt-underline-color;
	}

	&:hover {
		border-bottom-color: $link-hover-color;
	}

	&:focus {
		border-bottom: 3px solid $link-hover-color;
	}

	&:active {
		border-bottom-color: $link-active-color;
	}
}

.btn-link {
	font-weight: bold;
	color: #ffffff;

	&:focus {
		margin-bottom: -3px !important;
		border-bottom: 3px solid $link-hover-color;
	}
}

.drag-icon {
	color: $btn-icon-hover-color;

	&.disabled {
		color: $btn-icon-color;
	}
}

.ui-sortable {
	&.ui-sortable-disabled {
		.drag-icon {
			color: $btn-icon-color;
		}
	}
}

.table-paging {
	a {
		&:focus {
			background-color: $link-hover-color;

			.arrow-right {
				border-left-color: #000000;
			}

			.arrow-left {
				border-right-color: #000000;
			}
		}
	}
}

.paging-selected {
	color: #000000 !important;

	&:focus {
		background-color: $link-hover-color !important;
	}
}

.tag {
	color: $ui-bg-color;

	&.green-bg,
	&.yellow-bg {
		background-color: $ui-bg-selected-color;
		color: $white;
	}
}

.disabled {
	opacity: .6;
}

.multiselect {
	&.active {
		box-shadow: 0 0 0 1px $btn-focus-outline-color;
	}

	input[type="text"] {
		&:focus {
			box-shadow: none;
		}
	}

	.multiselect-list {
		li.selected {
			.subfilter-enabled,
			.subfilter-disable-btn,
			.subfilter-disable-btn:active {
				box-shadow: 0 0 0 1px $btn-focus-outline-color;
			}
		}
	}
}

.checkbox-radio {
	&:focus + label span {
		box-shadow: 0 0 0 1px $btn-focus-outline-color;
	}
}

.checkbox-list {
	li {
		padding-left: 1px;
		margin-left: -1px;
	}
}

%form-input-style {
	&:focus {
		box-shadow: 0 0 0 1px $btn-focus-outline-color;
	}
}

.multiselect-suggest {
	.suggest-hover {
		background-color: $ui-bg-color;
	}
}

.suggest-found {
	color: lighten($alt-yellow, 10%);
}


// Tables.
.list-table {
	.subfilter-enabled {
		background-color: $ui-bg-color;
		box-shadow: 0 0 0 1px $link-hover-color;
	}

	thead th {
		border-color: lighten($table-border-color, 3%);
	}

	.problem-nested:not([class*='flh-']):not(.row-selected):not(:hover) {
		background-color: $ui-bg-color;

		td {
			border-bottom-color: $table-border-color !important;
		}

		.timeline-axis,
		.timeline-td,
		.timeline-date,
		.problem-expand-td {
			border-bottom-color: transparent !important;
		}
	}

	.action-container {
		.link-action {
			&:active,
			&:focus {
				margin-bottom: -3px;
			}
		}
	}

	&.compact-view {
		.flh-na-bg,
		.flh-info-bg,
		.flh-warning-bg,
		.flh-average-bg,
		.flh-high-bg,
		.flh-disaster-bg {
			&:not(.row-selected):not(:hover) {
				background: none;
			}
		}

		td {
			box-shadow: inset 0 -1px 0 0 $table-border-color;

			&.na-bg,
			&.normal-bg,
			&.info-bg,
			&.warning-bg,
			&.average-bg,
			&.high-bg,
			&.disaster-bg {
				&::before {
					box-shadow: inset 0 -1px 0 0 $table-border-color;
					font-size: 22px;
					padding-top: 0;
					padding-bottom: 0;
				}
			}
		}
	}
}

// Filter checkboxes.
.filter-highlight-row-cb {
	display: none;
}

// Severity statuses.
.status-container {
	.status-na-bg,
	.status-info-bg,
	.status-warning-bg,
	.status-average-bg,
	.status-high-bg,
	.status-disaster-bg {
		border-color: rgba($ui-bg-color, .2);
		background-color: $ui-bg-selected-color;
		color: $ui-bg-color;
	}
}

%severity-icon {
	background-color: rgba(0, 0, 0, .0) !important;

	&::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 34px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 26px;
		color: #000000;
		text-align: center;
	}
}

@each $type, $icon in (
	na-bg: $zi-circle-question-filled,
	normal-bg: $zi-circle-check-filled,
	info-bg: $zi-circle-info-filled,
	average-bg: $zi-triangle-warning,
	warning-bg: $zi-circle-warning-filled,
	high-bg: $zi-triangle-flipped-warning,
	disaster-bg: $zi-stop-sign,
	log-na-bg: $zi-circle-question-filled,
	log-info-bg: $zi-circle-info-filled,
	log-warning-bg: $zi-circle-warning-filled,
	log-high-bg: $zi-triangle-flipped-warning,
	log-disaster-bg: $zi-stop-sign
) {
	// Dynamically generated classes:
	//  .na-bg,
	//  .normal-bg,
	//  .info-bg,
	//  .average-bg,
	//  .warning-bg,
	//  .high-bg,
	//  .disaster-bg,
	//  .log-na-bg,
	//  .log-info-bg,
	//  .log-warning-bg,
	//  .log-high-bg,
	//  .log-disaster-bg
	.#{$type} {
		@extend %severity-icon;

		&::before {
			@extend %icons-font;

			content: $icon;
		}
	}
}

.na-bg,
.log-na-bg,
.normal-bg {
	&::before {
		background-color: $alt-green;
	}
}

.na-bg,
.normal-bg,
.info-bg,
.average-bg,
.warning-bg,
.high-bg,
.disaster-bg {
	&.blink-hidden::after {
		content: none;
	}

	a.link-action {
		color: $link-color;
	}
}

// Dynamically generated classes:
//  .log-na-bg
//  .log-info-bg
//  .log-warning-bg
//  .log-high-bg
//  .log-disaster-bg
@each $class, $color in (
	na-bg: $alt-blue-grey,
	info-bg: $alt-dark-blue,
	warning-bg: $alt-yellow,
	high-bg: $alt-dark-orange,
	disaster-bg: $alt-red
) {
	.log-#{$class}::before {
		background-color: $color !important;
	}
}

td.na-bg,
td.normal-bg,
td.info-bg,
td.average-bg,
td.warning-bg,
td.high-bg,
td.disaster-bg,
td.log-na-bg,
td.log-info-bg,
td.log-warning-bg,
td.log-high-bg,
td.log-disaster-bg {
	padding-left: 42px !important;
	color: $font-color;
}

.notif-body {
	h4 {
		padding-bottom: 3px;
		margin-bottom: -3px;
	}

	p {
		margin-bottom: 2px;
	}

	li {
		padding-left: 42px;
	}
}

.notif-indic {
	width: 34px;
	height: 27px;
	position: relative;
	margin: 0 0 0 -42px;

	.notif-indic-snooze {
		margin-top: 32px;
	}
}

td.inactive-bg {
	padding-left: 42px !important;
	color: $font-color;
}

.inactive-bg {
	@extend %severity-icon;

	&::before {
		@extend %icons-font;

		content: $zi-stop-sign;
		background-color: $alt-red;
	}
}

// Error messages.
.msg-bad,
.msg-good,
.msg-warning {
	button {
		color: $btn-alt-color;
	}
}

// Graph and map.
.graph-selection {
	background-color: rgba($font-color, .2);
	border: 0;
	outline: 2px solid rgba($font-color, .6);
}

.svg-graph-selection {
	fill: rgba($font-color, .2);
	stroke: rgba($font-color, .6);
	stroke-width: 2px;
}

.ui-selectable-helper {
	background-color: rgba($font-color, .2);
	border: 2px solid rgba($font-color, .6);
}

.map-element-selected {
	border-color: $font-color;
}

// Time selection.

.ui-tabs-nav {
	.btn-time,
	.filter-trigger {
		&:hover {
			background-color: darken($btn-bg-color, 10%);
		}

		&:focus {
			background-color: darken($btn-bg-color, 10%);
			box-shadow: 0 0 0 2px $btn-focus-outline-color;
		}
	}

	.ui-state-focus {
		.btn-time,
		.filter-trigger {
			background-color: darken($btn-bg-color, 10%);
			box-shadow: 0 0 0 2px $btn-focus-outline-color;
		}

		&.ui-tabs-active {
			.btn-time,
			.filter-trigger {
				background-color: $ui-hover-bg-color;
				box-shadow: 0 0 0 2px $btn-focus-outline-color;
			}
		}
	}
}

.time-quick {
	li {
		a {
			&:focus {
				box-shadow: 0 0 0 2px $btn-focus-outline-color;
			}
		}
	}
}

.problem-icon-link {
	&:focus {
		box-shadow: 0 0 0 2px $btn-focus-outline-color;
	}
}

.problem-icon-link,
.problem-icon-list {
	.problem-icon-list-item {
		@extend %icon-medium;

		padding-left: 0;
		color: $font-color;
		border: none;
		background: transparent;

		&::before {
			@extend %icons-font;

			margin-right: 4px;
			color: #000000;
			border-radius: 3px;
		}
	}

	// Dynamically generated classes:
	//  .status-na-bg
	//  .status-normal-bg
	//  .status-info-bg
	//  .status-average-bg
	//  .status-warning-bg
	//  .status-high-bg
	//  .status-disaster-bg
	@each $type, $icon in (
		na-bg: $zi-circle-question-filled,
		normal-bg: $zi-circle-check-filled,
		info-bg: $zi-circle-info-filled,
		average-bg: $zi-triangle-warning,
		warning-bg: $zi-circle-warning-filled,
		high-bg: $zi-triangle-flipped-warning,
		disaster-bg: $zi-stop-sign
	) {
		.status-#{$type}::before {
			content: $icon;
		}
	}
}

.totals-list {
	> div {
		border-top: 1px solid $ui-border-color;
		color: $font-color;
	}

	.count {
		font-weight: bold;
	}

	&.totals-list-horizontal {
		> div:not(:last-of-type) {
			border-right: 1px solid $ui-border-color;
		}
	}
}

// InputSecret and ButtonDropdown.

.btn-undo.is-focused {
	box-shadow: 0 1px 0 $btn-focus-outline-color, 0 -1px 0 $btn-focus-outline-color;
}

// Tabfilter.

.filter-container.tabfilter-container {
	.tabfilter-item-label {
		&.focused {
			box-shadow: 0 0 0 2px $btn-focus-outline-color;
		}
	}
}
