@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-TimeSelect {
	display: flex;
	position: relative;
	align-items: center;
	font-size: @fontSize;
	font-weight: @font-weight-medium;
	color: @color-darkGray;
	background-color: @color-white;
	border: 1px solid @featured-color-default-borderColor;
	width: -moz-fit-content;
	width: fit-content;
	padding: 3px 4px;

	&-isDisabled {
		background-color: @color-neutral-3;
	}

	&-meridiem {
		.lucid-SingleSelect-Control {
			padding: 0;
			border: none;
			font-weight: 400;
			height: 100%;
			line-height: 18px;
		}
		.lucid-SingleSelect-Control-content {
			margin-right: 0;
			padding: 0 2px;
			height: 100%;
			line-height: 18px;
		}
		.lucid-DropMenu-Control:focus,
		.lucid-SingleSelect-Control:not(.lucid-SingleSelect-Control-is-disabled).lucid-SingleSelect-Control:not(.lucid-SingleSelect-Control-is-expanded):hover,
		.lucid-SingleSelect-Control:not(.lucid-SingleSelect-Control-is-disabled).lucid-SingleSelect-Control:not(.lucid-SingleSelect-Control-is-expanded):focus,
		.lucid-SingleSelect-Control-content:hover,
		.lucid-SingleSelect-Control-content:focus {
			outline: none;
			background-color: @color-primary-light;
		}
	}

	&-clock {
		stroke: @color-neutral-5;
		margin-left: 7px;

		&.active {
			stroke: @color-primary;
		}
	}

	&-time-disabled {
		color: @color-neutral-6;
	}

	&-time {
		border-style: none;
		width: 1.3em;
		position: relative;
		border: 0;
		background: none;
		font: inherit;
		box-sizing: content-box;
		-moz-appearance: textfield;
		padding-left: 1px;

		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	&-time-hour {
		text-align: right;
		padding-right: 1px;
	}

	&-time-hour,
	&-time {
		font-weight: 400;
		height: 18px;
		line-height: 18px;
		box-shadow: none;

		&:focus,
		&:hover {
			background: @color-primary-light;
			outline: none;
		}
	}
}