@import "variables.less";
@import "../common/SpinWheel.less";

@mbl-PickerItemHeight: 100px;
@mbl-PickerItemWidth: 100px;

.mblSpinWheel {
	background-image: none !important;
	border: none !important;
	margin: auto 0;
	height: 400px !important;
	width: auto !important;
	display: -ms-flexbox;
	color: @win-foreground-color;

	& .mblSpinWheelSlot {
		-ms-flex-preferred-size: auto;
		border: none;
		-ms-user-select: none;
		text-align: left !important;
		overflow: hidden;
		margin: 0px !important;
		width: @mbl-PickerItemWidth !important;

		&:empty {
			display: none !important;
		}

		&:not([widgetId]) {
			top: 150px;
			height: 94px !important;
			width: 86px !important;
			padding: 0 0 0 8px !important;
			margin-right: 6px !important;
			background-color: @win-inactive-color;
			line-height: 4.5;
		}
	}

	& .mblSpinWheelSlotContainer:not(.mblSelectedSlot) {
		& .mblSpinWheelSlotLabel:not(.mblSelectedSlotItem) {
		  opacity: 0;
		  -ms-transition: opacity 0.4s ease-out;
		  &:before {
			  opacity: 0;
			  transition: opacity 0.4s ease-out;
		  }
		}
	}

	& .mblSpinWheelSlotLabel:not(.mblSelectedSlotItem) {
		opacity: 1;
		-ms-transition: opacity 0.4s ease-out;
		&:before {
			opacity: 1;
			transition: opacity 0.4s ease-out;
		}
	}

	& .mblSpinWheelSlotLabel {
		border: none;
		margin: 0px;
		color: @win-disabled-color;
		height: @mbl-PickerItemHeight;
		line-height: 3.5;
		font-size: @win-font-size-extra-large;

		&.mblSelectedSlotItem {
			color: @win-foreground-color;
			&:before {
				background-color: @win-disabled-color;
				z-index: -1;
			}
		}

		&:before {
			content: '';
			position: absolute;
			width: 90px;
			height: 90px;
			border: 2px solid @win-disabled-color;
			left: 0px;
		}

		&.mblSpinWheelSlotLabelGray {
			opacity: 0.3;

			&:before{
				opacity: 0.3;
			}
		}
	}

	& .mblSpinWheelBar {
		display: none;
	}

	& .mblSpinWheelSlotTouch {
		background-color: @win-bg-color;
		opacity: 0.01;
	}
}

.mblTooltip.mblOpener  {
	& .mblSpinWheelDatePicker {
		left: calc(~"50% - 150px");
		position: absolute !important;
		top: 50%;
		bottom: 50%;
		width: 300px !important;
	}
}