/*
DatePicker (and DateRangePicker, which shares these rules)

A button that shows the date and opens a Calendar in a popover, or a text
field with a calendar button (input). The trigger's width is held by an
invisible stack of the widest texts the format can show, so picking a date
never resizes it.

  .date-picker                    root (inline; is-block for full width)
  .date-picker-trigger            the button (button mode); data-empty without a value, data-readonly
  .date-picker-text               the shown text over its sizers
  .date-picker-sizer              invisible widest texts
  .date-picker-field              text field and calendar button (input mode)
  .date-picker-input              the text field
  .date-picker-button             the calendar button inside the field
  .date-picker-content            the popover panel around the calendar
  .date-picker-footer             content under the calendar (presets)
  .date-picker-actions            Cancel and OK (actions)
  .date-picker-value              hidden input: name, required, validity
*/

@layer components {

.date-picker {
  position:       relative;
  display:        inline-flex;
  max-width:      100%;
  vertical-align: middle;
}

.date-picker.is-block {
  display: flex;
  width:   100%;
}

.date-picker-trigger.button {
  justify-content: flex-start;
  gap:             var(--control-gap);
  min-width:       0;
  max-width:       100%;
  font-weight:     var(--weight-body);
  text-transform:  none;
}

.date-picker.is-block .date-picker-trigger.button {
  width: 100%;
}

.date-picker-trigger svg {
  flex:   none;
  width:  var(--icon-size);
  height: var(--icon-size);
  color:  var(--ink-dim);
}

.date-picker-text {
  display:    inline-grid;
  min-width:  0;
  text-align: start;
  /* Equal width digits, so the sizer's dates bound every date's width. */
  font-variant-numeric: tabular-nums;
}

.date-picker-text > * {
  grid-area:     1 / 1;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

.date-picker-sizer {
  visibility: hidden;
}

.date-picker-trigger[data-empty] .date-picker-shown {
  color: var(--ink-dim);
}

/* Read only: focusable and readable, but it never opens, so a press gives no
   hover or pressed feedback. */
.date-picker-trigger.button[data-readonly] {
  cursor: default;
}

.date-picker-trigger.button.is-outline[data-readonly]:is(:hover, :active) {
  background: var(--control-bg);
  transform:  none;
}

/* INPUT MODE: a field with the calendar button inside its end. */

.date-picker-field {
  position:    relative;
  display:     inline-grid;
  align-items: center;
  min-width:   0;
}

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

.date-picker-field > *,
.date-picker-field .date-picker-button {
  grid-area: 1 / 1;
}

.date-picker-input {
  width:              100%;
  min-width:          0;
  height:             var(--control-height);
  margin:             0;
  padding-inline:     var(--control-padding-x) calc(var(--control-height) + var(--space-1));
  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);
  font-family:        var(--font-ui);
  font-size:          var(--text-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing:     var(--tracking-ui);
  transition:         border-color var(--duration-fast) var(--ease-out),
                      box-shadow var(--duration-fast) var(--ease-out);
}

.date-picker-input::placeholder {
  color: var(--ink-dim);
}

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

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

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

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

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

.date-picker-button.button {
  justify-self:      end;
  width:             calc(var(--control-height) - 2 * var(--space-1));
  height:            calc(var(--control-height) - 2 * var(--space-1));
  margin-inline-end: var(--space-1);
  padding:           0;
}

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

/* Sizes follow the control tiers. */

.date-picker.is-sm .date-picker-input {
  height:         var(--control-height-sm);
  padding-inline: var(--control-padding-x-sm) calc(var(--control-height-sm) + var(--space-1));
  font-size:      var(--text-ui-sm);
}

.date-picker.is-sm .date-picker-button.button {
  width:  calc(var(--control-height-sm) - 2 * var(--space-1));
  height: calc(var(--control-height-sm) - 2 * var(--space-1));
}

.date-picker.is-lg .date-picker-input {
  height:         var(--control-height-lg);
  padding-inline: var(--control-padding-x-lg) calc(var(--control-height-lg) + var(--space-1));
  font-size:      var(--text-ui-lg);
}

.date-picker.is-lg .date-picker-button.button {
  width:  calc(var(--control-height-lg) - 2 * var(--space-1));
  height: calc(var(--control-height-lg) - 2 * var(--space-1));
}

.date-picker-trigger[aria-invalid="true"] {
  border-color: var(--danger);
}

/* Popover */

.popover.date-picker-content {
  width:     max-content;
  max-width: var(--available-width, calc(100vw - 2 * var(--space-2)));
  padding:   0;
}

.date-picker-content > .calendar {
  display: block;
}

.date-picker-footer:empty {
  display: none;
}

.date-picker-footer {
  padding:    0 var(--space-3) var(--space-3);
}

/* actions: Cancel and OK under the calendar (APG date picker dialog). */
.date-picker-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--space-2);
  padding:         0 var(--space-3) var(--space-3);
}

/* The hidden value input: in the form, never seen; validation messages
   point at the control above it. */
.date-picker-value {
  position:           absolute;
  inset-inline-start: 0;
  bottom:             0;
  width:              1px;
  height:             1px;
  margin:             0;
  padding:            0;
  border:             0;
  opacity:            0;
  pointer-events:     none;
}

}