/*
TimePicker

The browser's own <input type="time"> in the control chrome: segments,
arrows, typing, the hour cycle of the locale and form validation are
native. A clock icon sits at the start; the browser's picker button is
hidden unless indicator is set (shadcn hides it too) or there are
options, since in Chromium that button opens the suggestions. The width
comes from the format, so a value never resizes the field.

  .time-picker              wrapper (inline-grid; is-block for full width)
  .time-picker-input        the <input type="time">
  .time-picker-icon         the clock, pointer-events: none
*/

@layer components {

.time-picker {
  position:       relative;
  display:        inline-grid;
  align-items:    center;
  min-width:      0;
  max-width:      100%;
  vertical-align: middle;
}

.time-picker.is-block {
  display: grid;
  width:   100%;
}

.time-picker > * {
  grid-area: 1 / 1;
}

.time-picker-input {
  width:              100%;
  min-width:          0;
  height:             var(--control-height);
  margin:             0;
  padding-block:      0;
  padding-inline:     var(--control-padding-x);
  border:             var(--control-border-width) solid var(--control-border);
  border-radius:      var(--radius-control);
  background:         var(--control-bg);
  box-shadow:         var(--control-shadow);
  color:              var(--ink);
  color-scheme:       inherit;
  font-family:        var(--font-ui);
  font-size:          var(--text-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing:     var(--tracking-ui);
  appearance:         none;
  -webkit-appearance: none;
  transition:         border-color var(--duration-fast) var(--ease-out),
                      box-shadow var(--duration-fast) var(--ease-out);
}

.time-picker.has-icon .time-picker-input {
  padding-inline-start: calc(var(--control-padding-x) + var(--icon-size) + var(--control-gap));
}

.time-picker-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.time-picker-input::-webkit-datetime-edit-hour-field:focus,
.time-picker-input::-webkit-datetime-edit-minute-field:focus,
.time-picker-input::-webkit-datetime-edit-second-field:focus,
.time-picker-input::-webkit-datetime-edit-ampm-field:focus {
  background: var(--item-selected);
  color:      var(--item-selected-ink);
  border-radius: var(--radius-xs);
}

.time-picker:not(.has-indicator) .time-picker-input::-webkit-calendar-picker-indicator {
  display: none;
}

.time-picker-input::-webkit-calendar-picker-indicator {
  cursor:  pointer;
  opacity: var(--opacity-muted);
}

.time-picker-input:hover:not(:disabled) {
  border-color: var(--rule-strong);
}

.time-picker-input:focus-visible,
.time-picker-input:focus-within {
  outline:      none;
  border-color: var(--focus);
  box-shadow:   var(--focus-ring);
}

.time-picker-input[aria-invalid="true"],
.time-picker-input[data-user-invalid] {
  border-color: var(--danger);
}

.time-picker-input[aria-invalid="true"]:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

.time-picker-input:disabled {
  opacity: var(--opacity-disabled);
  cursor:  not-allowed;
}

.time-picker-input:read-only:not(:disabled) {
  background: var(--bg-muted);
}

.time-picker-icon {
  justify-self:       start;
  display:            inline-grid;
  margin-inline-start: var(--control-padding-x);
  color:              var(--ink-dim);
  pointer-events:     none;
}

.time-picker-icon svg {
  width:  var(--icon-size);
  height: var(--icon-size);
}

/* Sizes follow the control tiers. */

.time-picker.is-sm .time-picker-input {
  height:         var(--control-height-sm);
  padding-inline: var(--control-padding-x-sm);
  font-size:      var(--text-ui-sm);
}

.time-picker.is-sm.has-icon .time-picker-input {
  padding-inline-start: calc(var(--control-padding-x-sm) + var(--icon-size) + var(--control-gap));
}

.time-picker.is-sm .time-picker-icon {
  margin-inline-start: var(--control-padding-x-sm);
}

.time-picker.is-lg .time-picker-input {
  height:         var(--control-height-lg);
  padding-inline: var(--control-padding-x-lg);
  font-size:      var(--text-ui-lg);
}

.time-picker.is-lg.has-icon .time-picker-input {
  padding-inline-start: calc(var(--control-padding-x-lg) + var(--icon-size) + var(--control-gap));
}

.time-picker.is-lg .time-picker-icon {
  margin-inline-start: var(--control-padding-x-lg);
}

}