/* CSS for thumbwheel */

/* The wrapper overlays the entire view to capture touches outside the thumbwheels */
#tw_wrapper {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: var(--main-wrapper-haze);
	display: flex; justify-content: center; align-items: flex-end;
}

/* The thumbwheel is hidden off the bottom of the view and transitions upward */
#tw {
	background-color: var(--nav-header-bg-color);
	min-width: 200px;
}
.tw-hide {
	animation: twOut 200ms ease-out forwards;
}
.tw-show {
	/*transition: transform 200ms ease-out;*/
	animation: twIn 200ms ease-out forwards;
}
@keyFrames twIn {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0%);
	}
}
@keyFrames twOut {
	from {
		transform: translateY(0%);
	}
	to {
		transform: translateY(100%);
	}
}

/* header Done/Cancel buttons */
#tw_cancel, #tw_done {
	font-weight: bold;
	min-width: 6ch;
	min-height: 40px;
	margin: 0;
	text-align: center;
}
/* semi-transparent bezel over the wheels */
#tw_bezel {
	position: absolute;
	top:0; right: 0; bottom: 0; left: 0;
	border: 1px solid black;
	display: flex; flex-direction: column;
	pointer-events: none;		/* prevent sending ptr events to overlying bezel */
}
#tw_bezelHi {
	background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.05));
	flex-grow: 1;
}
#tw_bezelMid {
	min-height: 40px;
	height: 1.5em;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	flex-grow: 0;
}
#tw_bezelLo {
	background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.05));
	flex-grow: 1;
}

.tw_wheels {
	position: relative;
	min-height: calc(5 * 40px);
	height: calc(5 * 1.5em);
	display: flex; flex-direction: row;
	color: var(--main-text-color);
	background-color: var(--main-text-bg-color);
	font-weight: bold;
}

/* container within which the larger list of text for each wheel scrolls */
.tw_wheelContainer {
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	min-width: 40px;
	overflow: hidden;
}
.tw_wheel {
	margin: 0;
	padding: 0;
	width: 100%;
}
.tw_wheel-interior {
	flex-grow: 0;
}
.tw_wheel-left, .tw_wheel-interior {
	border-right: 1px solid darkgrey;
}
.tw_wheel-right, .tw_wheel-left {
	flex-grow: 1;
}
.tw_wheelItem {
	min-height: 40px;
	height: 1em;
	padding: 4px;
	display:flex; align-items: center; justify-content: center;
}
.tw_wheel-right .tw_wheelItem {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.tw_wheel-left .tw_wheelItem {
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.tw_wheel-interior .tw_wheelItem {
	justify-content: center;
}
.tw_wheelItem-warning {
	color: var(--main-text-warning-color);
}