@layer env.components {
  .env-picker-popup {
    --env-control-height: var(--env-control-height-sm);
    --env-picker-popup-day: calc(var(--env-row-height) - 0.25rem);
    align-content: start;
    inline-size: auto;
    min-inline-size: min(var(--anchor-width, 0%), var(--available-width, 100vw));
    --env-picker-popup-window-room: calc(100vw - 2rem);
    max-inline-size: var(--available-width, var(--env-picker-popup-window-room));
    padding: var(--env-popup-panel-padding);
  }
  .env-picker-popup-body {
    min-inline-size: 0;
  }
  .env-picker-popup-body > .env-calendar {
    justify-self: stretch;
    inline-size: auto;
    min-inline-size: calc(7 * var(--env-calendar-day));
    contain: inline-size;
  }
  @container env-window (width >= 37.5rem) {
    .env-picker-popup {
      min-inline-size: 0;
    }
    .env-picker-popup:has(> .env-picker-popup-body > .env-calendar) {
      min-inline-size: min(
        var(--anchor-width, 0%),
        calc(
          7 * var(--env-picker-popup-day) + 2 *
            (var(--env-popup-panel-padding) + var(--env-control-border-width)) + 2 *
            var(--env-space-2)
        ),
        var(--available-width, 100vw)
      );
    }
  }
  @media (pointer: coarse) {
    .env-picker-popup {
      --env-picker-popup-day: var(--env-control-height-touch);
    }
  }
  .env-picker-popup:has(.env-calendar) {
    row-gap: var(--env-space-1);
  }
  .env-picker-popup-footer-end {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }
  .env-picker-popup-footer .env-button {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}
@layer env.components {
  .env-date-picker {
    --env-field-height: max(var(--env-control-height), var(--env-text-field-least, 0rem));
    --env-date-picker-min-width: 12rem;
    min-inline-size: min(var(--env-date-picker-min-width), 100%);
    grid-template-columns: minmax(0, var(--env-date-picker-min-width)) minmax(0, 1fr);
    column-gap: 0;
  }
  .env-date-picker > * {
    grid-column: 1 / -1;
  }
  @media (pointer: coarse) {
    .env-date-picker {
      --env-field-height: max(var(--env-control-height), var(--env-control-height-touch));
    }
  }
  .env-date-picker .env-date-picker-control {
    --env-date-picker-action: max(
      var(--env-control-target-min),
      calc(var(--env-field-height) - var(--env-space-2))
    );
    --env-date-picker-actions: 1;
    --env-date-picker-end: var(--env-space-1);
  }
  .env-date-picker .env-date-picker-control[data-action-count='2'] {
    --env-date-picker-actions: 2;
  }
  .env-date-picker .env-date-picker-control > .env-date-picker-trigger {
    display: flex;
    align-items: center;
    padding-inline-end: calc(
      var(--env-date-picker-end) + var(--env-date-picker-actions) * var(--env-date-picker-action) +
        var(--env-date-picker-actions) * var(--env-space-1)
    );
    text-align: start;
    cursor: pointer;
  }
  .env-date-picker
    .env-date-picker-control
    > .env-date-picker-trigger:is(:disabled, [aria-readonly='true']) {
    cursor: default;
  }
  .env-date-picker-value,
  .env-date-picker-placeholder {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .env-date-picker-placeholder {
    color: var(--env-color-fg-muted);
  }
  .env-date-picker:not([data-label-hidden])
    .env-date-picker-control:has(> label):not([data-label-floating], :focus-within)
    .env-date-picker-placeholder {
    color: transparent;
  }
  .env-date-picker-end {
    pointer-events: none;
  }
  .env-date-picker-end > .env-date-picker-clear {
    pointer-events: auto;
  }
  .env-date-picker-end > .env-icon.env-date-picker-icon {
    display: grid;
    place-items: center;
    inline-size: var(--env-date-picker-action);
    block-size: var(--env-date-picker-action);
  }
  .env-date-picker-end > .env-date-picker-icon > svg {
    inline-size: var(--env-control-icon-size);
    block-size: var(--env-control-icon-size);
  }
  .env-date-picker-native {
    --env-date-picker-native-size: 0.0625rem;
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    inline-size: var(--env-date-picker-native-size);
    block-size: var(--env-date-picker-native-size);
    margin: calc(-1 * var(--env-date-picker-native-size));
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
  }
  .env-date-picker-panes {
    grid-template-columns: minmax(0, auto);
  }
  .env-date-picker-time {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .env-date-picker-time > .env-time-list {
    align-self: center;
  }
  .env-date-picker-time-title {
    color: var(--env-color-fg-muted);
    font: var(--env-type-body-sm);
    font-weight: var(--env-font-weight-medium);
  }
  @container env-window (width >= 37.5rem) {
    .env-date-picker-panes {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .env-date-picker-time {
      flex: 1 0 auto;
    }
    .env-date-picker-time-title {
      justify-content: center;
      min-block-size: calc(0.8 * var(--env-control-height-md));
    }
  }
  .env-date-picker-icon {
    animation: none;
  }
}