@import '~vue2-timepicker/dist/VueTimepicker.css';

//FIX: Dropdown select scroll in firefox
.e--ua-firefox.wp-admin .cx-vui-time{
	.dropdown{
		.select-list{
			ul{
				li{
					width: 60px;
				}
			}
		}
	}
}

.wp-admin .cx-vui-time {
	height: auto;
	-webkit-appearance:none;
	input[type="text"]{
		box-shadow: 0 0 0 transparent;
		border-radius: 4px;
		border: 1px solid #7e8993;
		background-color: #fff;
		color: #32373c;
		&:focus{
			border-radius: 4px 4px 0 0;
		}
	}
	.dropdown{
		width: unset;
		left: 2px;
		border-radius: 0 0 4px 4px;
		overflow: hidden;
		.select-list{
			justify-content: flex-start;
			width: unset;
			ul{
				background-color: #fff;
				color: #7B7E81;
				flex: 0 1 58px;
				li{
					background-color: transparent;
					padding: 3px 0;
					margin-bottom: 1px;
					width: 36px;
					&:hover, &.active{
						background-color: #007CBA;
						color: #fff;
					}
					&.hint{
						text-transform: uppercase;
						&:hover{
							background-color: #fff;
							color: #7B7E81;
						}
					}
				}

				&::-webkit-scrollbar{
					width: 6px;
				}
				&::-webkit-scrollbar-thumb, &::-webkit-scrollbar-trac{
					background: #B7B9BB;
					border-radius: 4px;
				}
				&::-webkit-scrollbar-track-piece{
					background: #F8F8F8;
					opacity:0.5;
					&:hover{
						opacity:1;
					}
				}
				/*&::-webkit-scrollbar-button{
					width: 50px;
				}*/

				/* Buttons */
				&::-webkit-scrollbar-button:single-button {
					display: none;
				}
			}
		}
	}
	&--size {
		&-default {
			font-size: 15px;
			line-height: 21px;
			padding: 12px 25px 13px;
			.cx-vui-button__content {
				.dashicons {
					margin: 0 5px 0 -8px;
					.rtl & {
						margin: 0 -8px 0 5px;
					}
				}
				span + .dashicons {
					margin: -8px 0 0 5px;
					.rtl & {
						margin: -8px 5px 0 0;
					}
				}
			}
		}
		&-link {
			font-size: 15px;
			line-height: 18px;
			.cx-vui-button__content {
				svg {
					margin: 0 5px 1px 0;
					.rtl & {
						margin: 0 0 1px 5px;
					}
				}
				span + svg {
					margin: 0 0 1px 5px;
					.rtl & {
						margin: 0 5px 1px 0;
					}
				}
			}
		}
		&-mini {
			font-size: 13px;
			line-height: 19px;
			padding: 6px 14px 7px;
			.cx-vui-button__content {
				.dashicons {
					margin: 0 4px 0 -5px;
					.rtl & {
						margin: 0 -5px 0 4px;
					}
				}
				span + .dashicons {
					margin: -5px 0 0 4px;
					.rtl & {
						margin: -5px 4px 0 0;
					}
				}
			}

		}
		&-fullwidth {
			width: 100%;
		}
	}
	&--disabled {
		cursor: default;
		opacity: .3;
		pointer-events: none;
	}
}