/* calendar flatpickr */
.js-flatpickr {
  position: relative;
}

.js-flatpickr .icon {
  position: absolute;
  top: 50%;
  left: 30%;
  pointer-events: none;
  transform: translate(calc(-100% - 10px), -50%);
}

.js-flatpickr input[type="text"].js-flatpickr-input {
  padding-right: 42px;
}

.js-flatpickr .form__control.-input-with-icon {
  position: relative;
}

@media screen and (max-width: 1110px) {
  .js-flatpickr .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translate(calc(-100% - 10px), -50%);
  }

  .js-flatpickr input[type="text"].js-flatpickr-input {
    padding-right: 42px;
  }
}

/* 
ライブラリーのスタイルをカスタマイズ
----------------------------------------------------------
*/

.flatpickr-calendar {
  width: auto;
  padding: 8px;
  margin: 8px 0;
  border: 2px solid #bcc3ce;
  border-radius: 16px;
}

.flatpickr-months {
  display: flex;
  height: 40px;
  margin-bottom: 5px;
}

.flatpickr-weekdays {
  width: 100%;
  height: 40px;
  font-weight: 600;
}

/* 土日 */
span.flatpickr-weekday {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: #303644;
  text-align: center;
  cursor: default;
}

span.flatpickr-weekday:nth-child(6) {
  color: #64a4de;
}

span.flatpickr-weekday:nth-child(7) {
  color: #c82928;
}

.flatpickr-day.saturday:not(.selected, .flatpickr-disabled) {
  color: #64a4de;
}

.flatpickr-day.prevMonthDay.saturday:not(.selected),
.flatpickr-day.nextMonthDay.saturday:not(.selected),
.flatpickr-day.flatpickr-disabled.saturday:not(.selected) {
  color: rgb(0 0 255 / 20%);
}

.flatpickr-day.sunday:not(.selected, .flatpickr-disabled),
.flatpickr-day.jp-holiday:not(.selected) {
  color: #c82928;
}

.flatpickr-day.prevMonthDay.sunday:not(.selected),
.flatpickr-day.nextMonthDay.sunday:not(.selected),
.flatpickr-day.prevMonthDay.jp-holiday:not(.selected),
.flatpickr-day.nextMonthDay.jp-holiday:not(.selected),
.flatpickr-day.flatpickr-disabled.sunday:not(.selected),
.flatpickr-day.flatpickr-disabled.jp-holiday:not(.selected) {
  color: rgb(255 0 0 / 20%);
}

.flatpickr-calendar.open {
  display: flex;
  flex-direction: column;
}

/* 吹き出し矢印 */
.flatpickr-calendar::before {
  display: none;
  margin: 0 -5px;
  border-width: 5px;
}

.flatpickr-calendar::after {
  display: none;
  margin: 0 -4px;
  border-width: 4px;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  bottom: 100%;
}

.flatpickr-calendar.arrowTop::before {
  border-bottom-color: #e6e6e6;
}

.flatpickr-calendar.arrowTop::after {
  border-bottom-color: #fff;
}

.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  top: 100%;
}

.flatpickr-calendar.arrowBottom::before {
  border-top-color: #e6e6e6;
}

.flatpickr-calendar.arrowBottom::after {
  border-top-color: #fff;
}

/* ボタン */

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  top: 12px;
  left: 10px;
  width: 40px;
  background-image: url("/webform/smile/assets/icon-play-circle.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(-1, 1);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  top: 12px;
  right: 10px;
  width: 40px;
  background-image: url("/webform/smile/assets/icon-play-circle.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: block;
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.3;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  display: none;
}

/*  */
.dayContainer {
  gap: 4px;
}

.flatpickr-day {
  font-weight: 600;
  border-radius: 4px;
}

.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay {
  color: transparent;
  pointer-events: none;
}

.flatpickr-day.nextMonthDay.flatpickr-disabled,
.flatpickr-day.prevMonthDay.flatpickr-disabled {
  color: transparent;
  pointer-events: none;
}

/*  */
.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-top: 0;
}

.flatpickr-months .flatpickr-month {
  height: 40px;
}

/*  */
.flatpickr-rContainer {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0;
}

/*  */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  color: #fff;
  background: #6282d5;
  border-color: #6282d5;
  box-shadow: none;
}

/*  */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  background: #6282d550;
  border-color: #6282d550;
  outline: 0;
}

/*  */
.flatpickr-day.flatpickr-disabled {
  font-weight: 400;
  color: #bcc3ce;
  cursor: not-allowed;
  background-color: transparent;
}

.flatpickr-day.flatpickr-disabled:hover {
  color: #bcc3ce;
  cursor: not-allowed;
  background-color: transparent;
  border-color: transparent;
}

/* 予約カレンダー用スタイル */

.js-flatpickr-day-items {
  height: 48px;
}

.js-flatpickr-day-items > .dayItem{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 48px;
}

.js-flatpickr-day-items > .dayItem.available {
}

.js-flatpickr-day-items > .dayItem.unavailable {
  color: #bcc3ce;
  cursor: not-allowed;
  background-color: transparent;
}

.js-flatpickr-day-items > .dayItem > .dateNum {
  font-size: 14px;
  line-height: 18px;
}

.js-flatpickr-day-items > .dayItem > .dateStatus {
  font-size: 12px;
  line-height: 18px;
  color: inherit;
}

/* 選択時のスタイル */
.js-flatpickr-day-items.selected > .dayItem > .dateStatus {
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}