// -------------------------------------------------------------------
// :: DATEPICKER
// -------------------------------------------------------------------
// Using the Pikaday plugin - see /sass/vendor/_pikaday
// https://github.com/dbushell/Pikaday

.a-input--date {
	input {
		width: auto !important;
	}

	.icon-calendar {
		position: relative;
		left: -32px;
	}

	.a-input__field-holder {
		display: inline-block;
	}

	.a-input__field-holder + .a-input__field-holder {
		margin: 0;
	}

	&.a-input--date-multi {

		.a-input--date-multi__pipe {
			content: "";
			display: block;
			width: 1px;
			border-top: 1px solid $light;
			border-bottom: 1px solid $light;
			border-left: 1px solid $white;
			border-right: 1px solid $white;

		}

		.a-input__field-holder {
			letter-spacing: 0;

			input:first-child {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border-right: none;
			}

			input + input {
				border-left: none;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}

			&.a-input--date-multi--focus {
				input {
					border-color: $aqua;
				}
			}
		}

	}
}

.datepicker {
	position: relative;
}

.datepicker input {
	background: transparent;
	position: relative;
	z-index: 1;
}

.datepicker .button:not(.button-group) {
	width: rem(54px);
	height: rem(43px);
	line-height: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	padding: 0.7em 0.8rem;
}

.datepicker .button span {
	position: relative;
	line-height: 0;
	top: 0.7rem;
}

.pika-lendar {
	width: 365px;
}

.pika-label {
	font-family: $font-family-bold;
	font-weight: 500;
	font-size: rem(15px);
	color: $dark-extra;
}

.pika-prev,
.pika-next {
	color: $dark-extra;
	background-image: none;
	position: relative;

	&:before {
		@extend %___FLOW-icon;
		position: absolute;
		left: -20px;
	}
}

.pika-next {
	&:before {
		content: "\EA05";
	}
}

.pika-prev {
	&:before {
		content: "\EA03";
	}
}

.pika-title {
	border-bottom: 1px solid $medium;
}

.pika-table {

	thead tr th {
		padding: 10px !important;
		text-align: center;
	}

	thead tr th abbr {
		color: $dark-extra;
		font-size: rem(15px);
		text-transform: lowercase;
		font-family: $font-family-bold;
		font-weight: 500;
		text-decoration: none;
	}

	tr {
		background: transparent !important;
		border: none;
	}


	td {
		padding: 0 !important;

		&.is-disabled {
			opacity: 0.5;
		}
	}


}

.pika-button {
	width: rem(33px);
	height: rem(33px);
	text-align: center;
	font-size: rem(16px);
	margin: 0 auto;
	padding: 0 !important;
	line-height: 33px;
	border-radius: 50px;
	color: $dark-extra;

	&:hover {
		background: $light;
		color: $dark-extra;
	}
}

.is-today {

	.pika-button {
		background: $red;
		color: $white;
	}

}