// stylelint-disable

.react-datepicker__input-time-container {
  --#{$prefix}datepicker-time-input: 100%;
  --#{$prefix}datepicker-time-input-padding: var(--#{$prefix}ref-spacer-1) var(--#{$prefix}ref-spacer-4);
  --#{$prefix}datepicker-webkit-time-color: var(--#{$prefix}body-color);
  --#{$prefix}datepicker-webkit-time-align: left;
  --#{$prefix}datepicker-calendar-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clock' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");

  clear: both;
  width: 100%;
  float: left;
  margin: 8px 0px 12px 0px;
  text-align: center;

  .react-datepicker-time__caption {
    display: inline-block;
  }

  .react-datepicker-time__input-container {
    display: inline-block;

    .react-datepicker-time__input {
      display: inline-block;
      margin-left: var(--#{$prefix}ref-spacer-2);

      .d-datepicker-time {
        width: var(--#{$prefix}datepicker-time-input);
        // stylelint-disable selector-no-qualifying-type
        input[type="time"] {
          padding: var(--#{$prefix}datepicker-time-input-padding);
          appearance: auto;
          -moz-appearance: textfield;
          &::-webkit-datetime-edit {
            color: var(--#{$prefix}datepicker-webkit-time-color);
            text-align: var(--#{$prefix}datepicker-webkit-time-align);
          }
          &::-webkit-calendar-picker-indicator {
            background-image: var(--#{$prefix}datepicker-calendar-picker-icon);
          }
          &:is(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
            -webkit-appearance: none;
            margin: 0;
          }
        }
      }
    }
  }
}

// stylelint-enable