@import "ansyn/less/common";

:host {
	z-index: @z-index-status-bar-navigation-area;
	direction: rtl;
	// This component is under the footer, which is always ltr, so rtl needs to be redefined

	.box {
		margin: 0 3px;

		.button {
			&:extend(.status-bar-button-round);
			border-radius: @status-bar-panel-radius;
			background-color: @status-bar-panels;
			height: 35px;
			width: 310px;

			&.openTop {
				height: 25px;
				background-color: #0a0d0d;
				border: solid 1px rgba(255, 255, 255, 0.5);
				border-radius: @time-picker-border-radius;

				i {
					font-size: @icon-size;
				}
			}

			&.active {
				background-color: @status-bar-active;
			}

			&:hover:not(.active) {
				background: @status-bar-hover;
			}

			span.date-range {
				direction: ltr; // dates are always ltr
				margin-right: 5px;
			}
		}

		&.timePickerBox {
			margin: 0 3px;
			font-size: 13px;

			span.title {
				outline: none;
				cursor: text;

				&::selection {
					background: @status-bar-panels;
				}

				&.error {
					color: red;
				}
			}
		}
	}

	input.time-picker-input {
		position: fixed;
		padding-left: 28px;
		width: 100%;
		height: 100%;
		border: none;
		background-color: transparent;
		color: white;
		opacity: 0;
		pointer-events: none;
		font-family: @app-font;
		font-size: 13px;
	}
}
