/* 日付設問（fa_date）のカレンダー選択UI用スタイル */

.fa-date-calendar-btn {
	display: inline-block;
	vertical-align: middle;
	width: 38px;
	height: 38px;
	margin-left: 8px;
	padding: 6px;
	border: 1px solid #999;
	border-radius: 4px;
	background: #fff;
	color: #555;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fa-date-calendar-btn svg {
	width: 100%;
	height: 100%;
}

.fa-date-calendar-btn:hover,
.fa-date-calendar-btn:active {
	background: #eee;
}

/* flatpickr の値受け渡し用input（画面には出さない） */
.fa-date-calendar-input {
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	visibility: hidden;
}

/* 年選択ドロップダウン（スピナー入力の置き換え）
   デザインは flatpickr の月ドロップダウンのクラスを併用して揃える。
   年→月の順で並ぶため、月ドロップダウンとの間に余白を空ける */
.flatpickr-current-month .fa-date-cal-year-select {
	margin-right: 0.5ch;
}

/* 「今日」ボタン */
.fa-date-cal-footer {
	border-top: 1px solid #e6e6e6;
	text-align: center;
	padding: 4px 0;
	background: #fff;
}

.fa-date-cal-today-btn {
	border: 0;
	background: none;
	color: #569ff7;
	font-size: 14px;
	padding: 6px 24px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fa-date-cal-today-btn:hover,
.fa-date-cal-today-btn:active {
	text-decoration: underline;
}

/* 狭い画面ではアイコン基準のポップアップでなく画面中央のモーダル表示にする */
@media (max-width: 640px) {
	.flatpickr-calendar.open {
		position: fixed;
		/* flatpickr が設定する inline の top/left を上書きするため !important 指定 */
		top: 50% !important;
		left: 50% !important;
		right: auto;
		/* オープンアニメーションの transform に上書きされないよう !important 指定 */
		-webkit-transform: translate(-50%, -50%) !important;
		transform: translate(-50%, -50%) !important;
		-webkit-animation: none !important;
		animation: none !important;
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45), 0 3px 13px rgba(0, 0, 0, 0.3);
	}

	.flatpickr-calendar.open:before,
	.flatpickr-calendar.open:after {
		display: none;
	}
}