/*! PLF v0.1.0 | MIT */
/* extension: date and time picker */
[data-plf-root] .date-time-picker-panel {
  --_plf-date-time-picker-width: calc(31 * var(--plf-rem));
  inline-size: min(var(--plf-date-time-picker-width, var(--_plf-date-time-picker-width)), var(--_plf-anchor-width, calc(100vw - 16px)));
}
[data-plf-root] .date-time-picker-panel:where(:has([data-plf-part~="date-time-picker-group"] + [data-plf-part~="date-time-picker-group"] + [data-plf-part~="date-time-picker-group"])) {
  --_plf-date-time-picker-width: calc(35 * var(--plf-rem));
}
[data-plf-root] :where(.date-time-picker-panel) :is(.calendar-status, [data-plf-part~="calendar-status"]) {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  clip-path: inset(50%);
}
[data-plf-root] :where(.date-time-picker-body) > .calendar {
  inline-size: auto;
}
[data-plf-root] .date-time-picker-body {
  --_plf-date-time-picker-ring: calc(var(--plf-focus-width) + var(--plf-focus-offset));
  display: grid;
  overscroll-behavior: contain;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--plf-space-3);
  min-block-size: 0;
  margin: calc(-1 * var(--_plf-date-time-picker-ring));
  padding: var(--_plf-date-time-picker-ring);
  overflow-y: auto;
}
[data-plf-root] :is(.date-time-picker-time, [data-plf-part~="date-time-picker-time"]) {
  --_plf-date-time-picker-ring: calc(var(--plf-focus-width) + var(--plf-focus-offset));
  display: flex;
  gap: var(--plf-space-1);
  block-size: 0;
  min-block-size: 100%;
  padding-inline-start: var(--plf-space-3);
  border-inline-start: var(--plf-border-width) solid var(--plf-date-picker-border, var(--plf-color-border-subtle));
}
[data-plf-root] :where(.date-time-picker-time, [data-plf-part~="date-time-picker-time"]) > [data-plf-part~="date-time-picker-group"] {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}
[data-plf-root] [data-plf-part~="date-time-picker-heading"] {
  flex: none;
  text-align: center;
  padding-block: var(--plf-space-1);
  color: var(--plf-color-text-muted);
  font-size: var(--plf-font-size-sm);
  line-height: var(--plf-line-height);
}
[data-plf-root] [data-plf-part~="date-time-picker-column"] {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--plf-space-1) / 2);
  min-inline-size: calc(3 * var(--plf-rem));
  min-block-size: 0;
  padding: var(--_plf-date-time-picker-ring);
  overflow-y: auto;
  scrollbar-width: thin;
}
[data-plf-root] [data-plf-part~="date-time-picker-option"] {
  flex: none;
  cursor: pointer;
  text-align: center;
  padding: var(--plf-space-1) var(--plf-space-2);
  border-radius: var(--plf-radius-md);
  color: inherit;
  font-size: var(--plf-font-size-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--plf-line-height);
}
[data-plf-root] [data-plf-part~="date-time-picker-option"]:where(:not([aria-disabled="true"])):where(:hover) {
  background: var(--plf-date-time-picker-hover-bg, var(--plf-color-surface-muted));
}
[data-plf-root] [data-plf-part~="date-time-picker-option"]:where([aria-selected="true"]) {
  background: var(--plf-date-time-picker-selected-bg, var(--plf-color-primary));
  color: var(--plf-date-time-picker-selected-color, var(--plf-color-on-primary));
}
[data-plf-root] [data-plf-part~="date-time-picker-option"]:where([aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.5;
}
[data-plf-root] [data-plf-part~="date-time-picker-option"]:focus-visible {
  outline: var(--plf-focus-width) solid var(--plf-focus-color);
  outline-offset: var(--plf-focus-offset);
}
@media not all and (min-width: 40rem) {
  [data-plf-root] .date-time-picker-body {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-plf-root] :is(.date-time-picker-time, [data-plf-part~="date-time-picker-time"]) {
    justify-content: center;
    gap: var(--plf-space-4);
    block-size: auto;
    min-block-size: 0;
    padding-block-start: var(--plf-space-2);
    padding-inline-start: 0;
    border-block-start: var(--plf-border-width) solid var(--plf-date-picker-border, var(--plf-color-border-subtle));
    border-inline-start: 0;
  }
  [data-plf-root] :where(.date-time-picker-time, [data-plf-part~="date-time-picker-time"]) > [data-plf-part~="date-time-picker-group"] {
    position: relative;
  }
  [data-plf-root] :where(.date-time-picker-time, [data-plf-part~="date-time-picker-time"]) > :where([data-plf-part~="date-time-picker-group"]) + [data-plf-part~="date-time-picker-group"]::before {
    position: absolute;
    content: ":";
    inset-block-end: calc(var(--plf-date-time-picker-column-height, calc(6.5 * var(--plf-rem))) / 2);
    inset-inline-start: calc(var(--plf-space-4) / -2);
    color: var(--plf-color-text-muted);
    line-height: 0;
    transform: translateX(-50%);
  }
  [data-plf-root] [data-plf-part~="date-time-picker-heading"] {
    padding-block: 0;
  }
  [data-plf-root] [data-plf-part~="date-time-picker-column"] {
    min-width: 0px;
    flex: none;
    inline-size: calc(3.5 * var(--plf-rem));
    block-size: var(--plf-date-time-picker-column-height, calc(6.5 * var(--plf-rem)));
    scrollbar-width: none;
  }
  [data-plf-root] :where(.date-time-picker-panel) :is(.calendar-cell, [data-plf-part~="calendar-cell"]) {
    padding-block: 0;
  }
  [data-plf-root] :where(.date-time-picker-panel) :is(.calendar-footer, [data-plf-part~="calendar-footer"]) {
    display: none;
  }
}
@media (forced-colors: active) {
  [data-plf-root] [data-plf-part~="date-time-picker-option"]:where([aria-selected="true"]) {
    outline: var(--plf-border-width) solid Highlight;
  }
}