/*
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 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
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {

.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(--input-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(--input-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(--input-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);
}

}