/* wc.ui.dateField.scss */

// Styling specific to the date input component including the calendar.

// We use a single ID'd component for all calendar date pickers and move it around to where it is needed.
//scss-lint:disable IdSelector
@import 'mixins_common.scss';

.dateField {
	display: inline-block;
	position: relative;

	&[role='combobox'] {//partial date field or no native support
		@include border($color: $wc-ui-color-border-form-control);

		&[aria-disabled='true'] {
			background-color: $wc-ui-color-disabled-bg;
		}
	}
}

[role='combobox'] > input,
.wc_wdf_cal {
	vertical-align: middle;
}

[role='combobox'] {
	> input {
		// important to remove invalid state border
		// scss-lint:disable ImportantRule
		border: 0 none !important;
	}

	> [role='listbox'] {
		@include border;
		background-color: $wc-ui-color-global-bg;
		left: $border-width * -1;
		list-style-type: none;
		margin: 0;
		min-width: 100%;
		padding: 0;
		position: absolute;
		z-index: 2;
	}

	&[aria-expanded='false'] > [role='listbox'] {
		display: none;
	}

	li {
		margin: 0;
		min-height: 1em;
		padding: 1px $hgap-small;
	}

	[role='option'] {
		&:hover,
		&:focus {
			background-color: $wc-ui-color-invite-bg;
			cursor: pointer;
		}
	}
}

dialog [role='combobox'] > [role='listbox'] {
	z-index: 22;
}

// calendar launch button
.wc_wdf_cal {
	@include background-image-icon('../images/date.png');
	@include button($border: 0);
	@include border($pos: left);

	&:hover,
	&:focus {
		background-color: $wc-ui-color-invite-bg;
	}

	&[disabled] {
		background-image: url('../images/date-d.png');
	}
}

// This is the calendar container. The important is to override hidden from being inside a closed combo.
#wc-calbox {
	background-color: $wc-ui-color-global-bg;
	white-space: nowrap;
	z-index: 2;

	&[hidden] { // override of override
		//scss-lint:disable ImportantRule
		display: none !important;
	}

	dialog & {
		z-index: 22;
	}
}

// The calendar table
#wc-calendar {
	thead {
		@include border($pos: bottom);

		td:last-child { // container of the close button
			text-align: right;
		}
	}

	th {
		background-color: $wc-ui-color-highlight-bg;
		color: $wc-ui-color-highlight-fg;
		padding: $vgap-small $hgap-small;
		text-align: center;
	}

	input,
	thead button:first-of-type {
		margin-left: $hgap-large;
	}

	input { // year field: FF and IE do not size by max.
		width: 5em;
	}

	abbr { // days of the week
		border-bottom: 0 none;
	}
}

#wc-caldaybox td {
	color: $wc-ui-color-disabled-fg;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

// date picker buttons
.wc_wdf_pick {
	color: $wc-ui-color-global-fg;
	cursor: pointer;
	padding: $vgap-small $hgap-small;
	text-align: center;
	width: 100%;

	&:hover,
	&:focus {
		background-color: $wc-ui-color-invite-bg;
	}

	&[disabled] {
		background-color: $wc-ui-color-disabled-bg;
		color: $wc-ui-color-disabled-fg;
	}

	&[aria-pressed='true'] { // selected date
		background-color: $wc-ui-color-highlight-bg;
		color: $wc-ui-color-highlight-fg;
	}
}

.wc_wdf_today { // today
	@include outline();
}


// The main purpose of this CSS is to make the pop-up calendar full screen. We make all of the buttons bigger to make
// them easier for fingers to push and finally add a close button to make up for the lack of an escape key.
// The calendar container is a single generated element with a fixed id.
@include respond(mobile) {
	#wc-calbox {
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
	}

	#wc-calendar {
		font-size: 1.5em;
		height: 100%;

		thead {
			tr {
				vertical-align: middle;
			}

			td { // The td in the thead contain the form controls to change the date or close the calendar.
				padding: $hgap-normal;
			}

			button {
				background-color: transparent;
				border: 0 none;
				margin-left: $hgap-normal;
				padding: 0;
				vertical-align: middle;

				&::before {
					@include make-box;
				}
			}
		}

		th { // The th contain the day name addreviations.
			font-size: 1em;
		}
	}

	.wc_wdf_mv {
		&[value='-1']::before {
			content: url('../images/cal-mob-back1.svg');
		}

		&[value='1']::before {
			content: url('../images/cal-mob-forward1.svg');
		}

		&[value='t']::before {
			content: url('../images/cal-mob-today.svg');
		}
	}

	.wc_wdf_cls::before {
		content: url('../images/cal-mob-close.svg');
	}

	#wc-caldaybox .wc_wdf_pick {
		height: 100%;
		width: 100%;
	}
}

// need this AFTER the general mobile respond
// scss-lint:disable MergeableSelector
#wc-calendar {
	@include respond(ipad) { // weird iOS9 bug
		max-height: 704px;
	}
}
