@use '../common/var';
@use '../mixins/mixins';

@include mixins.b(time-spinner) {
	&.has-seconds {
		.el-time-spinner__wrapper {
			width: 33.3%;
		}
	}

	@include mixins.e(wrapper) {
		max-height: 190px;
		display: inline-block;
		width: 50%;
		vertical-align: top;
		position: relative;

		& .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
			padding-bottom: 15px;
		}

		@include mixins.when(arrow) {
			box-sizing: border-box;
			text-align: center;
			overflow: hidden;

			.el-time-spinner__list {
				transform: translateY(-32px);
			}

			.el-time-spinner__item:hover:not(.disabled):not(.active) {
				background: var.$color-white;
				cursor: default;
			}
		}
	}

	@include mixins.e(arrow) {
		font-size: 12px;
		color: var(--color--text--tint-1);
		position: absolute;
		left: 0;
		width: 100%;
		z-index: var.$index-normal;
		text-align: center;
		height: 30px;
		line-height: 30px;
		cursor: pointer;

		&:hover {
			color: var(--color--primary);
		}

		&.el-icon-arrow-up {
			top: 10px;
		}

		&.el-icon-arrow-down {
			bottom: 10px;
		}
	}

	@include mixins.e(input) {
		&.el-input {
			width: 70%;

			.el-input__inner {
				padding: 0;
				text-align: center;
			}
		}
	}

	@include mixins.e(list) {
		padding: 0;
		margin: 0;
		list-style: none;
		text-align: center;

		&::after,
		&::before {
			content: '';
			display: block;
			width: 100%;
			height: 80px;
		}
	}

	@include mixins.e(item) {
		height: 32px;
		line-height: 32px;
		font-size: 12px;
		color: var(--color--text--shade-1);

		&:hover:not(.disabled):not(.active) {
			background: var.$background-color-base;
			cursor: pointer;
		}

		&.active:not(.disabled) {
			color: var(--color--text--shade-1);
			font-weight: var(--font-weight--bold);
		}

		&.disabled {
			color: var(--color--text--tint-2);
			cursor: not-allowed;
		}
	}
}