.picker {
	position: absolute;
	z-index: $top-base;
	user-select: none;
}

.picker__box {
	background-color: $white;
	border-radius: 0 0 4px 4px;
	flex: 1;
	// 992
		@include responsive(md) {
			border-radius: 0 4px 4px 0;
		}
}

.picker__date-display {
	background-color: $brand-color;
	border-radius: 4px 4px 0 0;
	color: $brand-text;
	padding: $margin-sm $grid-gutter;
	text-align: left;
	// 992
		@include responsive(md) {
			border-radius: 4px 0 0 4px;
			width: floor(($cell-height * 7 + $grid-gutter) / 2);
		}
}

.picker__date-display-bottom {
	font-size: $font-size-h2;
	line-height: $line-height-h2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.picker__date-display-top {
	color: $brand-color-light;
	margin-bottom: $margin-base;
}

.picker__day {
	border-radius: 50%;
	display: inline-block;
	height: $btn-height;
	padding: (($btn-height - $line-height) / 2) 0;
	width: $btn-height;
	&:focus,
	&:hover {
		color: $brand-color;
		cursor: pointer;
	}
	&.picker__day--disabled {
		color: inherit;
		cursor: not-allowed;
		opacity: 0.5;
	}
	&.picker__day--highlighted {
		color: $brand-color;
	}
	&.picker__day--selected {
		background-color: $brand-color;
		color: $brand-text !important;
	}
}

.picker__day-display {
	margin-right: ($grid-gutter / 2);
}

.picker__day--outfocus {
	display: none;
}

.picker__footer {
	padding: $margin-base $grid-gutter;
	text-align: right;
	button {
		margin-left: ($grid-gutter / 2);
		&:first-child {
			margin-left: 0;
		}
	}
	// 992
		@include responsive(md) {
			padding-right: ($grid-gutter * 1.5);
			padding-left: ($grid-gutter * 1.5);
		}
}

.picker__frame {
	margin: $margin-lg auto;
	max-width: ($btn-height * 7 + $grid-gutter);
	position: relative;
	transform: scale(0, 0);
	transition: transform 0.3s $timing;
	.picker--opened & {
		transform: scale(1, 1);
	}
	// 992
		@include responsive(md) {
			max-width: ceil(($cell-height * 7 + $grid-gutter) * 1.5);
		}
}

.picker__header {
	margin-top: $margin-sm;
	margin-bottom: (($btn-height - $line-height) / 2);
	position: relative;
}

.picker__holder {
	align-items: center;
	backface-visibility: hidden;
	display: flex;
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	text-align: center;
	transform: translateY(100%);
	transition: transform 0s 0.3s;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	&:before {
		background-color: $black;
		content: "";
		display: block;
		height: 100%;
		opacity: 0;
		position: absolute;
			top: 0;
			left: 0;
		transition: opacity 0.3s $timing;
		width: 100%;
	}
	.picker--opened & {
		transform: translateZ(0);
		transition: none;
		&:before {
			opacity: 0.5;
		}
	}
}

.picker__input {
	background-color: transparent !important;
	border-bottom-style: solid !important;
	color: inherit !important;
	cursor: text !important;
	&.picker__input--active {
		border-color: $brand-color-accent;
		border-bottom-width: 2px;
		&.form-control-default {
			border-bottom-width: 1px;
		}
	}
}

.picker__month,
.picker__year {
	display: inline;
	margin-left: $grid-gutter;
	&:first-child {
		margin-left: 0;
	}
}

.picker__nav--next,
.picker__nav--prev {
	cursor: pointer;
	height: $btn-height;
	line-height: $line-height;
	margin-top: ($btn-height / -2);
	padding-top: (($btn-height - $line-height) / 2);
	padding-bottom: (($btn-height - $line-height) / 2);
	position: absolute;
		top: 50%;
	text-align: center;
	width: $btn-height;
	&:focus,
	&:hover {
		color: $brand-color;
	}
	// 992
		@include responsive(md) {
			width: $cell-height;
		}
}

.picker__nav--next {
	// position
		right: ($grid-gutter / 2);
	&:before {
		content: "keyboard_arrow_right";
	}
}

.picker__nav--prev {
	// position
		left: ($grid-gutter / 2);
	&:before {
		content: "keyboard_arrow_left";
	}
}

.picker__select--month,
.picker__select--year {
	@extend .form-control;
	background-position: 100% (($line-height - 12) / 2) !important;
	border-bottom: 0;
	display: inline-block;
	height: $line-height;
	margin-left: $grid-gutter;
	padding: 0;
	width: auto;
	&:first-child {
		margin-left: 0;
	}
	&:focus {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

.picker__table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 ($grid-gutter / 2);
	table-layout: fixed;
	// 992
		@include responsive(md) {
			margin: 0;
		}
}

.picker__table td,
.picker__table th {
	border: 0;
	font-size: floor($font-size * 0.9);
	line-height: $line-height;
	margin: 0;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	width: $btn-height;
	// 992
		@include responsive(md) {
			width: $cell-height;
			&:first-child {
				padding-left: ($grid-gutter / 2);
				width: ($cell-height + $grid-gutter / 2);
			}
			&:last-child {
				padding-right: ($grid-gutter / 2);
				width: ($cell-height + $grid-gutter / 2);
			}
		}
}

.picker__weekday {
	color: $black-hint-solid;
	padding-top: (($btn-height - $line-height) / 2) !important;
	padding-bottom: (($btn-height - $line-height) / 2) !important;
}

.picker__weekday-display {
	margin-right: ($grid-gutter / 2);
	&:after {
		content: ",";
	}
	// 992
		@include responsive(md) {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
		}
}

.picker__wrap {
	border-radius: 4px;
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	outline: 0;
	position: relative;
	vertical-align: middle;
	z-index: 1;
	// 992
		@include responsive(md) {
			flex-direction: row;
		}
}
