/* react-datepicker カスタムスタイル */

.react-datepicker-wrapper {
  width: 100%;
}

.react-datepicker__input-container {
  display: block;
  width: 100%;
}

.react-datepicker__input-container input {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 1px solid #e2e8f0; /* Chakra UI のボーダーカラー */
  border-radius: 0.375rem; /* Chakra UI のボーダーラジウス */
  box-shadow: 0 0 0 1px #cbd5e0 inset; /* Chakra UI のインセットシャドウ */
  background-color: #fff; /* 背景色 */
  color: #2d3748; /* テキストカラー */
}

.react-datepicker__input-container input:focus {
  border-color: #3182ce; /* フォーカス時のボーダーカラー */
  box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.6); /* Chakra UI のフォーカスシャドウ */
}

.react-datepicker {
  border: 1px solid #e2e8f0; /* カレンダーのボーダーカラー */
  border-radius: 0.375rem; /* カレンダーのボーダーラジウス */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); /* カレンダーのシャドウ */
}

.react-datepicker__header {
  background-color: #edf2f7; /* ヘッダーの背景色 */
  border-bottom: 1px solid #e2e8f0; /* ヘッダーのボーダーカラー */
}

.react-datepicker__current-month {
  color: #2d3748; /* ヘッダーのテキストカラー */
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #2d3748; /* 日付・曜日のテキストカラー */
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
  background-color: #3182ce; /* 選択された日の背景色 */
  color: #fff; /* 選択された日のテキストカラー */
}

.react-datepicker__day--today {
  background-color: #e2e8f0; /* 今日の日付の背景色 */
  color: #2d3748; /* 今日の日付のテキストカラー */
}