@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/datePicker/DatePicker.module.css

@@ -0,0 +1,940 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+@keyframes dpDialogIn {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes dpBorderShift {
+  from {
+    background-position: 0 0, 0 0;
+  }
+  to {
+    background-position: 200% 0, 0 0;
+  }
+}
+@keyframes dpSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.prokodo-DatePicker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+.prokodo-DatePicker--primary {
+  --pk-dp-gradient-from: var(--pk-color-brand);
+  --pk-dp-gradient-to: var(--pk-color-accent);
+  --pk-dp-shadow-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-dp-trigger-label-float-fg: var(--pk-color-brand);
+  --pk-dp-day-today-ring: var(--pk-color-brand);
+}
+.prokodo-DatePicker--secondary {
+  --pk-dp-gradient-from: var(--pk-color-accent);
+  --pk-dp-gradient-to: var(--pk-color-brand);
+  --pk-dp-shadow-color: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  --pk-dp-trigger-label-float-fg: var(--pk-color-accent);
+  --pk-dp-day-today-ring: var(--pk-color-accent);
+}
+.prokodo-DatePicker--success {
+  --pk-dp-gradient-from: var(--pk-color-success);
+  --pk-dp-gradient-to: #10CCB8;
+  --pk-dp-shadow-color: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  --pk-dp-trigger-label-float-fg: var(--pk-color-success);
+  --pk-dp-day-today-ring: var(--pk-color-success);
+}
+.prokodo-DatePicker--warning {
+  --pk-dp-gradient-from: var(--pk-color-warning);
+  --pk-dp-gradient-to: #f7cc6a;
+  --pk-dp-shadow-color: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  --pk-dp-trigger-label-float-fg: var(--pk-color-warning);
+  --pk-dp-day-today-ring: var(--pk-color-warning);
+}
+.prokodo-DatePicker--error {
+  --pk-dp-gradient-from: var(--pk-color-error);
+  --pk-dp-gradient-to: #ff6b6b;
+  --pk-dp-shadow-color: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  --pk-dp-trigger-label-float-fg: var(--pk-color-error);
+  --pk-dp-day-today-ring: var(--pk-color-error);
+}
+.prokodo-DatePicker--info, .prokodo-DatePicker--inherit, .prokodo-DatePicker--white {
+  --pk-dp-gradient-from: var(--pk-color-muted);
+  --pk-dp-gradient-to: var(--pk-color-border);
+  --pk-dp-shadow-color: rgba(0, 0, 0, 0.1);
+  --pk-dp-trigger-label-float-fg: var(--pk-color-muted);
+  --pk-dp-day-today-ring: var(--pk-color-muted);
+}
+html[data-theme="dark"] .prokodo-DatePicker--info, [data-theme="dark"] .prokodo-DatePicker--info, html[data-theme="dark"] .prokodo-DatePicker--inherit, [data-theme="dark"] .prokodo-DatePicker--inherit, html[data-theme="dark"] .prokodo-DatePicker--white, [data-theme="dark"] .prokodo-DatePicker--white {
+  --pk-dp-gradient-from: var(--pk-palette-grey-100);
+  --pk-dp-gradient-to: var(--pk-palette-grey-200);
+}
+.prokodo-DatePicker__trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--pk-dp-trigger-padding-y) calc(var(--pk-dp-trigger-padding-x) + 2rem) var(--pk-dp-trigger-padding-y) var(--pk-dp-trigger-padding-x);
+  background: var(--pk-dp-trigger-bg);
+  border: 1.5px solid var(--pk-dp-trigger-border);
+  border-radius: var(--pk-dp-trigger-radius);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--pk-timing-normal) ease, box-shadow var(--pk-timing-normal) ease;
+  box-shadow: 0 2px 8px var(--pk-dp-shadow-color), 0 1px 3px color-mix(in srgb, var(--pk-dp-shadow-color) 50%, transparent);
+}
+.prokodo-DatePicker__trigger:hover {
+  border-color: transparent;
+  box-shadow: 0 4px 12px var(--pk-dp-shadow-color), 0 0 5px var(--pk-dp-shadow-color);
+}
+.prokodo-DatePicker__trigger--open {
+  border-color: transparent;
+  box-shadow: 0 4px 12px var(--pk-dp-shadow-color), 0 0 5px var(--pk-dp-shadow-color);
+}
+.prokodo-DatePicker__trigger--open::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -1.5px;
+  border-radius: var(--pk-dp-trigger-radius);
+  background: linear-gradient(90deg, var(--pk-dp-gradient-from), var(--pk-dp-gradient-to), var(--pk-dp-gradient-from));
+  background-size: 200% 100%;
+  animation: dpBorderShift 3s linear infinite;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+  padding: 1.5px;
+}
+.prokodo-DatePicker__trigger__label {
+  position: absolute;
+  top: 50%;
+  left: var(--pk-dp-trigger-padding-x);
+  transform: translateY(-50%);
+  font-size: 1rem;
+  color: var(--pk-dp-trigger-label-fg);
+  pointer-events: none;
+  transition: transform var(--pk-timing-normal) ease, font-size var(--pk-timing-normal) ease, color var(--pk-timing-normal) ease;
+}
+.prokodo-DatePicker__trigger__label--float {
+  top: 0;
+  transform: translateY(-50%) scale(0.78);
+  transform-origin: top left;
+  font-size: 1rem;
+  color: var(--pk-dp-trigger-label-float-fg);
+  text-shadow: -3px 0 var(--pk-dp-trigger-bg), 3px 0 var(--pk-dp-trigger-bg), 0 -2px var(--pk-dp-trigger-bg), 0 2px var(--pk-dp-trigger-bg);
+}
+.prokodo-DatePicker__trigger__value {
+  font-size: 1rem;
+  color: var(--pk-dp-trigger-fg);
+  line-height: 1.4;
+}
+.prokodo-DatePicker__trigger__value--empty {
+  color: var(--pk-dp-trigger-fg-muted);
+}
+.prokodo-DatePicker__trigger__icon {
+  position: absolute;
+  right: var(--pk-dp-trigger-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--pk-dp-nav-fg);
+  pointer-events: none;
+}
+.prokodo-DatePicker__dialog {
+  position: absolute;
+  top: calc(100% + var(--pk-space-xs));
+  left: 0;
+  z-index: 200;
+  min-width: var(--pk-dp-dialog-min-width);
+  width: -moz-max-content;
+  width: max-content;
+  background: var(--pk-dp-dialog-bg);
+  border: 1px solid var(--pk-dp-dialog-border);
+  border-radius: var(--pk-dp-dialog-radius);
+  box-shadow: var(--pk-dp-dialog-shadow);
+  padding: var(--pk-dp-dialog-padding);
+  animation: dpDialogIn 180ms ease both;
+}
+html[data-theme="dark"] .prokodo-DatePicker__dialog, [data-theme="dark"] .prokodo-DatePicker__dialog, .pk-theme-dark .prokodo-DatePicker__dialog {
+  --pk-dp-header-fg: var(--pk-palette-grey-50);
+  --pk-dp-nav-fg: var(--pk-palette-grey-300);
+  --pk-dp-nav-hover-bg: rgba(255, 255, 255, 0.10);
+  --pk-dp-weekday-fg: var(--pk-palette-grey-400);
+  --pk-dp-footer-ghost-fg: var(--pk-palette-grey-300);
+  --pk-dp-footer-ghost-hover-fg: var(--pk-palette-grey-50);
+  --pk-dp-dialog-border: rgba(255, 255, 255, 0.10);
+  --pk-dp-dialog-bg: var(--pk-color-surface);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__dialog {
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    box-sizing: border-box;
+    min-width: 0;
+    max-height: 92dvh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    border-radius: 1.25rem 1.25rem 0 0;
+    border-bottom: none;
+    padding: 0 1.25rem 2rem;
+    animation: dpSlideUp 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
+    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18), 0 -1px 0 var(--pk-dp-dialog-border);
+  }
+  .prokodo-DatePicker__dialog::before {
+    content: "";
+    display: block;
+    width: 2.5rem;
+    height: 0.25rem;
+    background: var(--pk-dp-gradient-from);
+    border-radius: 999px;
+    margin: 0.75rem auto 1.25rem;
+    flex-shrink: 0;
+  }
+}
+.prokodo-DatePicker__dialog__backdrop {
+  display: none;
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__dialog__backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 199;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    animation: dpDialogIn 200ms ease both;
+  }
+}
+.prokodo-DatePicker__dialog__close {
+  display: none;
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__dialog__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 100%;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--pk-dp-nav-fg);
+    flex-shrink: 0;
+    transition: color var(--pk-timing-fast) ease, background var(--pk-timing-fast) ease;
+  }
+  .prokodo-DatePicker__dialog__close:hover {
+    background: color-mix(in srgb, var(--pk-dp-gradient-from) 10%, transparent);
+    color: var(--pk-dp-gradient-from);
+  }
+}
+.prokodo-DatePicker__dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--pk-space-sm);
+  gap: var(--pk-space-xs);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__dialog__header {
+    margin-bottom: 1.25rem;
+  }
+}
+.prokodo-DatePicker__month__label {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+  white-space: nowrap;
+  color: var(--pk-dp-header-fg);
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-DatePicker__month__label {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-DatePicker__month__label {
+    font-size: 1rem;
+  }
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__month__label {
+    font-weight: 700;
+    font-size: 1.75rem;
+    font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-style: normal;
+    line-height: 1.6;
+    letter-spacing: 0.03em;
+    text-transform: none;
+    text-align: left;
+    text-decoration: none;
+    font-weight: 700;
+  }
+}
+@media screen and (max-width: 480px) and (min-width: 480px) {
+  .prokodo-DatePicker__month__label {
+    font-size: 1.5rem;
+    line-height: 1.55;
+  }
+}
+@media screen and (max-width: 480px) and (min-width: 960px) {
+  .prokodo-DatePicker__month__label {
+    font-size: 1.5rem;
+    line-height: 1.55;
+  }
+}
+.prokodo-DatePicker__header-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 700;
+  text-align: center;
+  padding: 0.15em 0.35em;
+  border-radius: var(--pk-radius-sm, 4px);
+  color: var(--pk-dp-header-fg);
+  transition: background var(--pk-timing-fast) ease, color var(--pk-timing-fast) ease;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-DatePicker__header-btn {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-DatePicker__header-btn {
+    font-size: 1rem;
+  }
+}
+.prokodo-DatePicker__header-btn:hover {
+  background: color-mix(in srgb, var(--pk-dp-gradient-from) 10%, transparent);
+  color: var(--pk-dp-gradient-from);
+}
+.prokodo-DatePicker__header-range {
+  flex: 1 1;
+  text-align: center;
+  font-weight: 700;
+  color: var(--pk-dp-header-fg);
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-DatePicker__header-range {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-DatePicker__header-range {
+    font-size: 1rem;
+  }
+}
+.prokodo-DatePicker__picker-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: var(--pk-space-xs, 0.25rem);
+  gap: var(--pk-space-xs, 0.25rem);
+  padding-block: var(--pk-space-sm, 0.5rem);
+}
+.prokodo-DatePicker__picker-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--pk-radius-md, 6px);
+  cursor: pointer;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  height: 2.75rem;
+  background: transparent;
+  color: var(--pk-dp-header-fg);
+  transition: background var(--pk-timing-fast) ease, color var(--pk-timing-fast) ease;
+}
+.prokodo-DatePicker__picker-cell--today {
+  font-weight: 700;
+  color: var(--pk-dp-gradient-from);
+}
+.prokodo-DatePicker__picker-cell--selected {
+  background: var(--pk-dp-gradient-from);
+  color: #fff;
+  font-weight: 700;
+}
+.prokodo-DatePicker__picker-cell--disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.prokodo-DatePicker__picker-cell:hover:not([disabled]) {
+  background: color-mix(in srgb, var(--pk-dp-gradient-from) 10%, transparent);
+  color: var(--pk-dp-gradient-from);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__picker-cell {
+    height: 3.25rem;
+    font-size: 1rem;
+  }
+}
+.prokodo-DatePicker__nav__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--pk-dp-nav-radius);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--pk-dp-nav-fg);
+  transition: color var(--pk-timing-fast) ease, background var(--pk-timing-fast) ease;
+}
+.prokodo-DatePicker__nav__btn:hover {
+  color: var(--pk-dp-gradient-from);
+}
+.prokodo-DatePicker__nav__btn--prev svg {
+  transform: rotate(180deg);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__nav__btn {
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 100%;
+    background: color-mix(in srgb, var(--pk-dp-nav-fg) 8%, transparent);
+  }
+  .prokodo-DatePicker__nav__btn:hover {
+    background: color-mix(in srgb, var(--pk-dp-gradient-from) 12%, transparent);
+    color: var(--pk-dp-gradient-from);
+  }
+}
+.prokodo-DatePicker__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: var(--pk-space-xs);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__weekdays {
+    margin-bottom: var(--pk-space-sm);
+  }
+}
+.prokodo-DatePicker__weekday {
+  text-transform: uppercase;
+  color: var(--pk-dp-weekday-fg);
+  padding-block: var(--pk-space-xs);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-DatePicker__weekday {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-DatePicker__weekday {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-DatePicker__weekday {
+  text-align: center;
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__weekday {
+    font-weight: 400;
+    font-size: 1.125rem;
+    font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-style: normal;
+    line-height: 1.55;
+    letter-spacing: 0.03em;
+    text-transform: none;
+    text-align: left;
+    text-decoration: none;
+    font-weight: 600;
+    padding-block: var(--pk-space-sm);
+  }
+}
+@media screen and (max-width: 480px) and (min-width: 480px) {
+  .prokodo-DatePicker__weekday {
+    font-size: 1rem;
+  }
+}
+@media screen and (max-width: 480px) and (min-width: 960px) {
+  .prokodo-DatePicker__weekday {
+    font-size: 1rem;
+  }
+}
+.prokodo-DatePicker__days {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.prokodo-DatePicker__days > div {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-gap: 2px;
+  gap: 2px;
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__days {
+    gap: var(--pk-space-xs);
+  }
+  .prokodo-DatePicker__days > div {
+    gap: var(--pk-space-xs);
+  }
+}
+.prokodo-DatePicker__day {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  border-radius: 100%;
+  border: none;
+  background: transparent;
+  color: var(--pk-dp-day-fg);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background var(--pk-timing-fast) ease, color var(--pk-timing-fast) ease;
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__day {
+    font-size: 1rem;
+    min-height: 2.75rem;
+  }
+}
+.prokodo-DatePicker__day::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: 100%;
+  background: linear-gradient(135deg, var(--pk-dp-gradient-from), var(--pk-dp-gradient-to));
+  padding: 1.5px;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity var(--pk-timing-fast) ease;
+}
+.prokodo-DatePicker__day:hover {
+  background: radial-gradient(100% 100% at 50% 50%, color-mix(in srgb, var(--pk-dp-gradient-from) 22%, transparent) 0%, transparent 100%);
+}
+.prokodo-DatePicker__day:hover::before {
+  opacity: 1;
+}
+.prokodo-DatePicker__day:active:not(.prokodo-DatePicker__day--disabled) {
+  background: radial-gradient(100% 100% at 50% 50%, var(--pk-dp-gradient-from) 0%, var(--pk-dp-gradient-to) 100%);
+  color: #fff;
+}
+.prokodo-DatePicker__day:active:not(.prokodo-DatePicker__day--disabled)::before {
+  opacity: 0;
+}
+.prokodo-DatePicker__day--today:not(.prokodo-DatePicker__day--selected) {
+  font-weight: 600;
+}
+.prokodo-DatePicker__day--today:not(.prokodo-DatePicker__day--selected)::before {
+  opacity: 1;
+}
+.prokodo-DatePicker__day--selected {
+  border-radius: 100%;
+  background: linear-gradient(135deg, var(--pk-dp-gradient-from), var(--pk-dp-gradient-to));
+  color: #fff;
+  font-weight: 600;
+  box-shadow: 0 2px 8px var(--pk-dp-shadow-color);
+}
+.prokodo-DatePicker__day--selected::before {
+  opacity: 0;
+}
+.prokodo-DatePicker__day--selected:hover {
+  filter: brightness(1.08);
+}
+.prokodo-DatePicker__day--selected:hover::before {
+  opacity: 0;
+}
+.prokodo-DatePicker__day--outside {
+  color: var(--pk-dp-day-outside-fg);
+}
+.prokodo-DatePicker__day--disabled {
+  color: var(--pk-dp-day-disabled-fg);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.prokodo-DatePicker__day--disabled:hover {
+  background: transparent;
+}
+.prokodo-DatePicker__time__row {
+  display: flex;
+  align-items: center;
+  gap: var(--pk-space-xs);
+  padding: var(--pk-space-sm) 0 var(--pk-space-xs);
+  margin-top: var(--pk-space-sm);
+  border-top: 1px solid var(--pk-dp-footer-border);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__time__row {
+    justify-content: center;
+    gap: var(--pk-space-md);
+    padding: var(--pk-space-md) 0;
+    margin-top: var(--pk-space-md);
+  }
+}
+.prokodo-DatePicker__time__label {
+  padding-left: var(--pk-space-sm);
+  text-transform: uppercase;
+  color: var(--pk-dp-time-label-fg);
+  flex: 1 1;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-DatePicker__time__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-DatePicker__time__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-DatePicker__time__label {
+  font-weight: 600;
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__time__label {
+    display: none;
+  }
+}
+.prokodo-DatePicker__time__select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: var(--pk-dp-time-select-bg);
+  color: var(--pk-dp-time-select-fg);
+  border: 1px solid var(--pk-dp-time-select-border);
+  border-radius: var(--pk-dp-time-select-radius);
+  padding: var(--pk-space-xs) var(--pk-space-sm);
+  cursor: pointer;
+  transition: border-color var(--pk-timing-fast) ease;
+  width: 3.5rem;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-DatePicker__time__select {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-DatePicker__time__select {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-DatePicker__time__select {
+  text-align: center;
+}
+.prokodo-DatePicker__time__select:focus {
+  outline: none;
+  border-color: var(--pk-dp-gradient-from);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__time__select {
+    width: 5.5rem;
+    height: 3.25rem;
+    font-size: 1.75rem;
+    font-weight: 600;
+    border-radius: var(--pk-radius-lg);
+    text-align: center;
+    padding: 0;
+  }
+}
+.prokodo-DatePicker__time__sep {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--pk-dp-time-sep-fg);
+  margin-inline: 2px;
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__time__sep {
+    font-size: 1.75rem;
+    font-weight: 700;
+  }
+}
+.prokodo-DatePicker__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--pk-space-xs);
+  padding-top: var(--pk-space-sm);
+  margin-top: var(--pk-space-sm);
+  border-top: 1px solid var(--pk-dp-footer-border);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__footer {
+    gap: var(--pk-space-sm);
+    padding-top: var(--pk-space-md);
+    margin-top: var(--pk-space-md);
+  }
+}
+.prokodo-DatePicker__footer__btn {
+  padding: var(--pk-space-xs) var(--pk-space-sm);
+  border-radius: var(--pk-radius-md);
+  border: none;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--pk-timing-fast) ease, color var(--pk-timing-fast) ease, box-shadow var(--pk-timing-fast) ease;
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__footer__btn {
+    flex: 1 1;
+    height: 3rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    border-radius: var(--pk-radius-lg);
+  }
+}
+.prokodo-DatePicker__footer__btn--ghost {
+  background: transparent;
+  color: var(--pk-dp-footer-ghost-fg);
+}
+.prokodo-DatePicker__footer__btn--ghost:hover {
+  background: var(--pk-dp-nav-hover-bg);
+  color: var(--pk-dp-footer-ghost-hover-fg);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__footer__btn--ghost {
+    background: color-mix(in srgb, var(--pk-dp-nav-fg) 8%, transparent);
+  }
+}
+.prokodo-DatePicker__footer__btn--ghost:first-child {
+  color: var(--pk-dp-gradient-from);
+  margin-right: auto;
+}
+.prokodo-DatePicker__footer__btn--ghost:first-child:hover {
+  background: color-mix(in srgb, var(--pk-dp-gradient-from) 12%, transparent);
+  color: var(--pk-dp-gradient-from);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__footer__btn--ghost:first-child {
+    margin-right: 0;
+    background: color-mix(in srgb, var(--pk-dp-gradient-from) 10%, transparent);
+  }
+}
+.prokodo-DatePicker__footer__btn--filled {
+  background: linear-gradient(135deg, var(--pk-dp-gradient-from), var(--pk-dp-gradient-to));
+  color: #fff;
+  font-weight: 600;
+  box-shadow: 0 2px 6px var(--pk-dp-shadow-color);
+}
+.prokodo-DatePicker__footer__btn--filled:hover {
+  filter: brightness(1.08);
+  box-shadow: 0 3px 10px var(--pk-dp-shadow-color);
+}
+@media screen and (max-width: 480px) {
+  .prokodo-DatePicker__footer__btn--filled {
+    flex: 1.5 1;
+    box-shadow: 0 4px 16px var(--pk-dp-shadow-color);
+  }
+}
+.prokodo-DatePicker__helper {
+  margin-top: var(--pk-space-xs);
+  padding-inline: var(--pk-dp-trigger-padding-x);
+  font-size: 0.8125rem;
+  color: var(--pk-dp-trigger-fg-muted);
+}
+.prokodo-DatePicker__error {
+  margin-top: var(--pk-space-xs);
+  padding-inline: var(--pk-dp-trigger-padding-x);
+  font-size: 0.8125rem;
+  color: var(--pk-color-error);
+}