@import url("/assets/date_time_picker-28c42b12.css");

:root {
  --duet-color-primary: var(--color-secondary);
  --duet-color-text: var(--color-txt);
  --duet-color-text-active: var(--color-txt--reversed);
  --duet-color-placeholder: var(--color-txt--placeholder);
  --duet-color-surface: var(--color-bg--sheet);
  --duet-color-overlay: var(--color-bg--overlay-dark);
  --duet-color-border: var(--color-border);

  --duet-font: var(--font-family);

  --duet-radius: 0.8rem;

  /* Picker */
  --picker-rgb-lightblue: var(--color-bg--secondary);

  --picker-color-white: var(--picker-rgb-white);
  --picker-color-lightblue: var(--picker-rgb-lightblue);
  --picker-rgb-ink: var(--color-txt);
  --picker-color-bg--surface: var(--color-bg--sheet);
  --picker-color-bg--surface-light: var(--color-bg--sheet);
}

.duet-date__input {
  border: none;
  border-radius: 0;
  padding: 2px 0;
  width: 14.5rem;

  &:focus {
    border-color: var(--color-border);
    box-shadow: 0 0 1px var(--color-focus-ring);
    outline: 0;
  }
}

.duet-date__toggle-icon {
  color: var(--color-txt-subtle);
}

.duet-date__day:hover::before,
.duet-date__day.is-today::before {
  opacity: 0.15;
}

time-picker {
  width: auto;

  .time-picker__options-wrapper {
    left: -0.4rem;
  }
}