header {
	display: flex;
	align-items: center;
	height: 45px;
	padding: 0 10px;
	background: $header-bg-color;
	border-bottom: 1px solid $ui-border-color;

	> div {
		overflow: hidden;
	}

	h1 {
		position: relative;
		padding-top: 1px;
		overflow: hidden;
		line-height: 24px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.header-controls {
		flex-shrink: 0;
		margin: 0 -2px 0 auto;
		padding: 2px;
		white-space: nowrap;

		label {
			line-height: 24px;
		}

		.radio-list-control {

			label {
				line-height: 1.2;
			}
		}
	}

	.header-kioskmode-controls {
		position: fixed;
		top: 5px;
		right: 45px;
		z-index: 1010;
		display: flex;
		transition: opacity 1s ease-out;

		&.hidden {
			opacity: 0;
		}

		& > li > ul {
			margin-right: 10px;
		}

		ul {
			display: flex;

			li {
				margin-right: 10px;
			}
		}
	}

	.header-z-select {
		max-width: 600px;
	}

	a.link-action {
		box-sizing: border-box;
		display: block;
		height: 25px;

		h1 {
			padding-right: 1em;

			&::after {
				content: '';
				position: absolute;
				top: 50%;
				right: .15em;
				width: .3em;
				height: .3em;
				margin-top: -.15em;
				border-right: 2px solid $font-color;
				border-bottom: 2px solid $font-color;
				transform: rotate(45deg);
				transition: border-color .2s ease-out;
			}
		}

		&:hover,
		&:focus {
			h1::after {
				border-color: $link-hover-color;
			}
		}
	}

	form {
		display: flex;
		justify-content: flex-end;
	}

	ul {
		text-align: right;

		li {
			display: inline-block;
			vertical-align: top;
			position: relative;
			padding: 0 0 0 10px;

			.btn-split {
				margin-right: 0;

				li {
					padding-left: 0;
				}
			}
		}

		ul li:first-child {
			padding-left: 0;
		}

		button {
			line-height: 22px;
		}
	}

	z-select {
		> button {
			line-height: normal;
		}

		.list {
			text-align: left;

			li:first-child {
				padding: 5px;
			}
		}
	}
}
