@keenmate/web-daterangepicker 1.7.0-rc01 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +80 -51
- package/dist/style.css +1 -1
- package/dist/web-daterangepicker.js +1144 -1146
- package/dist/web-daterangepicker.umd.js +9 -9
- package/package.json +6 -7
- package/src/css/_badges.css +67 -0
- package/src/css/_base.css +232 -0
- package/src/css/_calendar-grid.css +240 -0
- package/src/css/_header-navigation.css +356 -0
- package/src/css/_loading.css +36 -0
- package/src/css/_modifiers.css +41 -0
- package/src/css/_summary-actions.css +99 -0
- package/src/css/_tooltips.css +37 -0
- package/src/css/_variables.css +331 -0
- package/src/css/main.css +29 -0
- package/src/scss/_badges.scss +0 -70
- package/src/scss/_base.scss +0 -465
- package/src/scss/_calendar-grid.scss +0 -236
- package/src/scss/_header-navigation.scss +0 -370
- package/src/scss/_loading.scss +0 -39
- package/src/scss/_modifiers.scss +0 -50
- package/src/scss/_summary-actions.scss +0 -100
- package/src/scss/_tooltips.scss +0 -39
- package/src/scss/_variables.scss +0 -342
- package/src/scss/main.scss +0 -30
package/README.md
CHANGED
|
@@ -143,9 +143,6 @@ See the [JavaScript Instantiation Examples](examples-javascript-instantiation.ht
|
|
|
143
143
|
| `auto-close` | `'never' \| 'selection' \| 'apply'` | `'selection'` | When to close calendar (selection = after picking, apply = after Apply button, never = manual) |
|
|
144
144
|
| `positioning-mode` | `'inline' \| 'floating'` | `'floating'` | Calendar positioning (inline = embedded, floating = popup) |
|
|
145
145
|
| `input-size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Input field size (floating mode only) |
|
|
146
|
-
| `spacing` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Calendar spacing scale |
|
|
147
|
-
| `font-size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Calendar font size scale |
|
|
148
|
-
| `cell-size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Calendar day cell size |
|
|
149
146
|
| `enable-transitions` | `boolean` | `false` | Enable CSS transitions/animations |
|
|
150
147
|
|
|
151
148
|
## Properties
|
|
@@ -306,22 +303,26 @@ picker.getDateMetadataCallback = (date) => {
|
|
|
306
303
|
|
|
307
304
|
### CSS Styling for Special Dates
|
|
308
305
|
|
|
309
|
-
|
|
310
|
-
/* Holiday styling (predefined class) */
|
|
311
|
-
web-daterangepicker::part(calendar) .pa-date-picker__day.holiday {
|
|
312
|
-
background-color: rgba(239, 68, 68, 0.1);
|
|
313
|
-
}
|
|
306
|
+
Since the component uses Shadow DOM, inject custom styles via the `customStylesCallback`:
|
|
314
307
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
308
|
+
```javascript
|
|
309
|
+
picker.customStylesCallback = () => `
|
|
310
|
+
/* Holiday styling */
|
|
311
|
+
.drp-date-picker__day.holiday {
|
|
312
|
+
background-color: rgba(239, 68, 68, 0.1);
|
|
313
|
+
}
|
|
319
314
|
|
|
320
|
-
/*
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
315
|
+
/* Event styling */
|
|
316
|
+
.drp-date-picker__day.event {
|
|
317
|
+
background-color: rgba(16, 185, 129, 0.1);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* Custom class example */
|
|
321
|
+
.drp-date-picker__day.peak-season {
|
|
322
|
+
background-color: rgba(251, 191, 36, 0.15);
|
|
323
|
+
font-weight: 600;
|
|
324
|
+
}
|
|
325
|
+
`;
|
|
325
326
|
```
|
|
326
327
|
|
|
327
328
|
## Range Selection Modes
|
|
@@ -527,10 +528,8 @@ Customize the appearance using CSS custom properties:
|
|
|
527
528
|
|
|
528
529
|
```css
|
|
529
530
|
:root {
|
|
530
|
-
/*
|
|
531
|
-
--drp-
|
|
532
|
-
--drp-spacing-scale: 1; /* Scale all padding/margins/gaps */
|
|
533
|
-
--drp-cell-scale: 1; /* Scale day cell dimensions */
|
|
531
|
+
/* Base Unit - scale entire component by changing this */
|
|
532
|
+
--drp-rem: 10px; /* Default base unit (change to scale everything) */
|
|
534
533
|
|
|
535
534
|
/* Colors */
|
|
536
535
|
--drp-dropdown-background: #ffffff;
|
|
@@ -546,21 +545,29 @@ Customize the appearance using CSS custom properties:
|
|
|
546
545
|
/* Input Field */
|
|
547
546
|
--drp-input-background: var(--drp-dropdown-background);
|
|
548
547
|
--drp-input-color: var(--drp-text-primary);
|
|
549
|
-
--drp-input-border-color: var(--drp-border-color);
|
|
550
|
-
--drp-input-border-color-hover: var(--drp-accent-color);
|
|
551
|
-
--drp-input-border-color-focus: var(--drp-accent-color);
|
|
548
|
+
--drp-input-border-color: var(--base-input-border-color, var(--drp-border-color));
|
|
549
|
+
--drp-input-border-color-hover: var(--base-input-border-color-hover, var(--drp-accent-color));
|
|
550
|
+
--drp-input-border-color-focus: var(--base-input-border-color-focus, var(--drp-accent-color));
|
|
552
551
|
--drp-input-placeholder-color: var(--drp-text-secondary);
|
|
553
552
|
|
|
554
|
-
/* Typography */
|
|
555
|
-
--drp-font-size-xs:
|
|
556
|
-
--drp-font-size-sm:
|
|
557
|
-
--drp-font-size-base:
|
|
553
|
+
/* Typography (all scale with --drp-rem) */
|
|
554
|
+
--drp-font-size-xs: calc(1.2 * var(--drp-rem)); /* 12px */
|
|
555
|
+
--drp-font-size-sm: calc(1.4 * var(--drp-rem)); /* 14px */
|
|
556
|
+
--drp-font-size-base: calc(1.6 * var(--drp-rem)); /* 16px */
|
|
558
557
|
--drp-font-weight-medium: 500;
|
|
559
558
|
--drp-font-weight-semibold: 600;
|
|
560
559
|
|
|
560
|
+
/* Spacing (all scale with --drp-rem) */
|
|
561
|
+
--drp-spacing-xs: calc(0.4 * var(--drp-rem)); /* 4px */
|
|
562
|
+
--drp-spacing-sm: calc(0.8 * var(--drp-rem)); /* 8px */
|
|
563
|
+
--drp-spacing-md: calc(1.6 * var(--drp-rem)); /* 16px */
|
|
564
|
+
|
|
561
565
|
/* Borders */
|
|
562
566
|
--drp-border-width-base: 1px;
|
|
563
|
-
--drp-border-radius: 0.
|
|
567
|
+
--drp-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * var(--drp-rem)); /* 4px - day cells, tooltips */
|
|
568
|
+
--drp-border-radius-md: calc(var(--base-border-radius-md, 0.6) * var(--drp-rem)); /* 6px - inputs, buttons */
|
|
569
|
+
--drp-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * var(--drp-rem)); /* 8px - calendar, dropdowns */
|
|
570
|
+
--drp-border-radius: var(--drp-border-radius-md); /* default alias */
|
|
564
571
|
|
|
565
572
|
/* Shadows */
|
|
566
573
|
--drp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
|
@@ -575,55 +582,77 @@ Customize the appearance using CSS custom properties:
|
|
|
575
582
|
|
|
576
583
|
The component uses a 10px-based sizing system (`--drp-rem: 10px`) for clean, predictable dimensions:
|
|
577
584
|
|
|
578
|
-
| Size | Attribute | Height |
|
|
579
|
-
|
|
580
|
-
| XS | `input-size="xs"` | 31px |
|
|
581
|
-
| SM | `input-size="sm"` | 33px |
|
|
582
|
-
| MD | `input-size="md"` | 35px (default) |
|
|
583
|
-
| LG | `input-size="lg"` | 38px |
|
|
584
|
-
| XL | `input-size="xl"` | 41px |
|
|
585
|
+
| Size | Attribute | Height | Base Variable |
|
|
586
|
+
|------|-----------|--------|---------------|
|
|
587
|
+
| XS | `input-size="xs"` | 31px | `--base-input-size-xs-height` |
|
|
588
|
+
| SM | `input-size="sm"` | 33px | `--base-input-size-sm-height` |
|
|
589
|
+
| MD | `input-size="md"` | 35px (default) | `--base-input-size-md-height` |
|
|
590
|
+
| LG | `input-size="lg"` | 38px | `--base-input-size-lg-height` |
|
|
591
|
+
| XL | `input-size="xl"` | 41px | `--base-input-size-xl-height` |
|
|
592
|
+
|
|
593
|
+
**Theme Designer Integration**: Input heights reference `--base-input-size-*-height` variables from the [Theme Designer](https://theme-designer.keenmate.dev). This ensures consistent input heights across all KeenMate components (web-multiselect, web-daterangepicker).
|
|
585
594
|
|
|
586
595
|
For complete size variable reference (font sizes, padding, spacing), see [SIZES.md](SIZES.md).
|
|
587
596
|
|
|
588
597
|
#### Customizing Input Heights
|
|
589
598
|
|
|
590
|
-
|
|
599
|
+
Four ways to customize input dimensions:
|
|
591
600
|
|
|
592
601
|
```css
|
|
593
|
-
/* Option 1:
|
|
602
|
+
/* Option 1: Via Theme Designer base variables (recommended for multi-component consistency) */
|
|
603
|
+
:root {
|
|
604
|
+
--base-input-size-md-height: 4.2; /* All components: 42px at 10px rem */
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
/* Option 2: Direct px override */
|
|
594
608
|
web-daterangepicker {
|
|
595
609
|
--drp-input-size-md-height: 42px;
|
|
596
610
|
}
|
|
597
611
|
|
|
598
|
-
/* Option
|
|
612
|
+
/* Option 3: Scale all sizes via --drp-rem */
|
|
599
613
|
web-daterangepicker {
|
|
600
614
|
--drp-rem: 12px; /* MD = 3.5 × 12 = 42px */
|
|
601
615
|
}
|
|
602
616
|
|
|
603
|
-
/* Option
|
|
617
|
+
/* Option 4: Override specific size with calc */
|
|
604
618
|
web-daterangepicker {
|
|
605
619
|
--drp-input-size-md-height: calc(4.2 * var(--drp-rem));
|
|
606
620
|
}
|
|
607
621
|
```
|
|
608
622
|
|
|
609
|
-
###
|
|
623
|
+
### Calendar Scaling
|
|
624
|
+
|
|
625
|
+
Scale the entire calendar by setting `--drp-rem` directly on the `<web-daterangepicker>` element:
|
|
610
626
|
|
|
611
627
|
```css
|
|
612
|
-
/* Compact size */
|
|
613
|
-
|
|
614
|
-
--drp-
|
|
615
|
-
--drp-spacing-scale: 0.75;
|
|
616
|
-
--drp-cell-scale: 0.875;
|
|
628
|
+
/* Compact size (80%) */
|
|
629
|
+
web-daterangepicker.compact {
|
|
630
|
+
--drp-rem: 8px;
|
|
617
631
|
}
|
|
618
632
|
|
|
619
|
-
/* Large size */
|
|
620
|
-
|
|
621
|
-
--drp-
|
|
622
|
-
|
|
623
|
-
|
|
633
|
+
/* Large size (150%) */
|
|
634
|
+
web-daterangepicker.large {
|
|
635
|
+
--drp-rem: 15px;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
/* Or use inline style */
|
|
639
|
+
<web-daterangepicker style="--drp-rem: 12px;"></web-daterangepicker>
|
|
640
|
+
```
|
|
641
|
+
|
|
642
|
+
**Important:** Due to Shadow DOM, CSS variables must be set on the `<web-daterangepicker>` element itself (via class or inline style), not on a wrapper div.
|
|
643
|
+
|
|
644
|
+
For fine-grained control, override individual variables:
|
|
645
|
+
|
|
646
|
+
```css
|
|
647
|
+
web-daterangepicker.custom {
|
|
648
|
+
--drp-rem: 12px;
|
|
649
|
+
--drp-spacing-xs: 2px; /* Tighter gaps */
|
|
650
|
+
--drp-font-size-base: 18px; /* Larger text */
|
|
624
651
|
}
|
|
625
652
|
```
|
|
626
653
|
|
|
654
|
+
See [examples-sizes.html](examples-sizes.html) for interactive demos.
|
|
655
|
+
|
|
627
656
|
## Development
|
|
628
657
|
|
|
629
658
|
```bash
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";:host,:root{--drp-rem: 10px;--drp-spacing-xs: calc(.4 * var(--drp-rem));--drp-spacing-sm: calc(.8 * var(--drp-rem));--drp-spacing-md: calc(1.6 * var(--drp-rem));--drp-spacing-lg: calc(2.4 * var(--drp-rem));--drp-spacing-xl: calc(3.2 * var(--drp-rem));--drp-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--drp-rem));--drp-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--drp-rem));--drp-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--drp-rem));--drp-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--drp-rem));--drp-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--drp-rem));--drp-font-size-xl: calc(var(--base-font-size-xl, 2) * var(--drp-rem));--drp-font-size-2xl: calc(var(--base-font-size-2xl, 2.4) * var(--drp-rem));--drp-font-weight-normal: var(--base-font-weight-normal, 400);--drp-font-weight-medium: var(--base-font-weight-medium, 500);--drp-font-weight-semibold: var(--base-font-weight-semibold, 600);--drp-line-height-tight: var(--base-line-height-tight, 1.25);--drp-line-height-normal: var(--base-line-height-normal, 1.5);--drp-line-height-relaxed: var(--base-line-height-relaxed, 1.75);--drp-dropdown-background: #ffffff;--drp-border-color: #e5e7eb;--drp-primary-bg: #f3f4f6;--drp-primary-bg-hover: #e5e7eb;--drp-accent-color: #3b82f6;--drp-accent-color-hover: #2563eb;--drp-text-primary: #111827;--drp-text-secondary: #6b7280;--drp-text-on-accent: #ffffff;--drp-button-text-color: #ffffff;--drp-tooltip-background: #111827;--drp-tooltip-text-color: #ffffff;--drp-loading-overlay-background: rgba(255, 255, 255, .8);--drp-loading-spinner-color: var(--drp-border-color);--drp-loading-spinner-accent: var(--drp-accent-color);--drp-border-width-base: 1px;--drp-border-radius: calc(.6 * var(--drp-rem));--drp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--drp-transition-fast: .15s;--drp-easing-snappy: cubic-bezier(.4, 0, .2, 1);--drp-input-padding-h: calc(1.2 * var(--drp-rem));--drp-grid-columns: 3;--drp-grid-rows: 2;--drp-input-background: var(--drp-dropdown-background);--drp-input-color: var(--drp-text-primary);--drp-input-border-color: var(--drp-border-color);--drp-input-border-color-hover: var(--drp-accent-color);--drp-input-border-color-focus: var(--drp-accent-color);--drp-input-placeholder-color: var(--drp-text-secondary);--drp-input-background-disabled: var(--drp-primary-bg);--drp-input-focus-shadow-color: rgba(59, 130, 246, .1);--drp-input-focus-shadow-size: 3px;--drp-input-icon-opacity: .6;--drp-input-size-xs-font: calc(1.2 * var(--drp-rem));--drp-input-size-xs-padding-v: calc(.4 * var(--drp-rem));--drp-input-size-xs-padding-h: calc(.8 * var(--drp-rem));--drp-input-size-xs-height: calc(3.1 * var(--drp-rem));--drp-input-size-xs-icon-size: .75em;--drp-input-size-sm-font: calc(1.3 * var(--drp-rem));--drp-input-size-sm-padding-v: calc(.5 * var(--drp-rem));--drp-input-size-sm-padding-h: calc(.8 * var(--drp-rem));--drp-input-size-sm-height: calc(3.3 * var(--drp-rem));--drp-input-size-sm-icon-size: .875em;--drp-input-size-md-font: calc(1.4 * var(--drp-rem));--drp-input-size-md-padding-v: calc(.8 * var(--drp-rem));--drp-input-size-md-padding-h: calc(1.2 * var(--drp-rem));--drp-input-size-md-height: calc(3.5 * var(--drp-rem));--drp-input-size-md-icon-size: 1em;--drp-input-size-lg-font: calc(1.6 * var(--drp-rem));--drp-input-size-lg-padding-v: calc(1 * var(--drp-rem));--drp-input-size-lg-padding-h: calc(1.4 * var(--drp-rem));--drp-input-size-lg-height: calc(3.8 * var(--drp-rem));--drp-input-size-lg-icon-size: 1.125em;--drp-input-size-xl-font: calc(1.8 * var(--drp-rem));--drp-input-size-xl-padding-v: calc(1.2 * var(--drp-rem));--drp-input-size-xl-padding-h: calc(1.6 * var(--drp-rem));--drp-input-size-xl-height: calc(4.1 * var(--drp-rem));--drp-input-size-xl-icon-size: 1.25em;--drp-header-text-color: var(--drp-text-primary);--drp-header-bg-hover: var(--drp-primary-bg);--drp-header-bg-active: var(--drp-primary-bg-hover);--drp-nav-text-color: var(--drp-text-primary);--drp-nav-border-color: var(--drp-border-color);--drp-nav-bg-hover: var(--drp-primary-bg);--drp-nav-bg-active: var(--drp-primary-bg-hover);--drp-nav-border-hover: var(--drp-accent-color);--drp-rolling-bg: var(--drp-primary-bg);--drp-rolling-border-color: var(--drp-border-color);--drp-rolling-scrollbar-thumb: var(--drp-border-color);--drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);--drp-rolling-item-bg-hover: var(--drp-primary-bg);--drp-rolling-item-bg-selected: var(--drp-accent-color);--drp-rolling-item-color-selected: var(--drp-text-on-accent);--drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);--drp-weekday-color: var(--drp-text-secondary);--drp-day-text-color: var(--drp-text-primary);--drp-day-bg-hover: var(--drp-primary-bg);--drp-day-border-hover: var(--drp-accent-color);--drp-day-today-border: var(--drp-accent-color);--drp-day-selected-bg: var(--drp-accent-color);--drp-day-selected-color: var(--drp-text-on-accent);--drp-day-selected-bg-hover: var(--drp-accent-color-hover);--drp-day-focused-outline: var(--drp-accent-color);--drp-day-disabled-color: var(--drp-text-secondary);--drp-day-other-month-color: var(--drp-text-secondary);--drp-day-range-bg: var(--drp-accent-color);--drp-day-range-color: var(--drp-text-on-accent);--drp-summary-text-color: var(--drp-text-secondary);--drp-summary-border-color: var(--drp-border-color);--drp-summary-count-color: var(--drp-accent-color);--drp-button-border-color: var(--drp-border-color);--drp-button-bg-hover: var(--drp-primary-bg);--drp-button-border-hover: var(--drp-accent-color);--drp-button-today-color: var(--drp-accent-color);--drp-button-clear-color: var(--drp-text-secondary);--drp-button-cancel-color: var(--drp-text-secondary);--drp-button-apply-bg: var(--drp-accent-color);--drp-button-apply-color: var(--drp-button-text-color);--drp-button-apply-border: var(--drp-accent-color);--drp-button-apply-bg-hover: var(--drp-accent-color-hover);--drp-badge-number-bg: var(--drp-accent-color);--drp-badge-number-color: var(--drp-text-on-accent);--drp-badge-count-bg: #ef4444;--drp-badge-count-color: #ffffff;--drp-badge-text-bg: var(--drp-text-secondary);--drp-badge-text-color: #ffffff;--drp-unified-range-text-color: var(--drp-text-primary);--drp-unified-range-bg-hover: var(--drp-primary-bg);--drp-unified-range-bg-active: var(--drp-primary-bg-hover);--drp-unified-month-color: var(--drp-text-secondary);--drp-unified-rolling-disabled-color: var(--drp-text-secondary)}.drp-input{width:100%;font-family:var(--drp-font-family, var(--base-font-family, inherit));font-size:var(--drp-input-size-md-font);line-height:var(--drp-line-height-normal);color:var(--drp-input-color);background-color:var(--drp-input-background);border:var(--drp-border-width-base) solid var(--drp-input-border-color);border-radius:var(--drp-border-radius);padding:var(--drp-input-size-md-padding-v) var(--drp-input-size-md-padding-h);padding-right:calc(var(--drp-input-size-md-padding-h) * 2.5);height:var(--drp-input-size-md-height);box-sizing:border-box;transition:border-color var(--drp-transition-fast) var(--drp-easing-snappy),box-shadow var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-input::placeholder{color:var(--drp-input-placeholder-color);opacity:.6}.drp-input:hover:not(:disabled){border-color:var(--drp-input-border-color-hover)}.drp-input:focus{outline:none;border-color:var(--drp-input-border-color-focus);box-shadow:0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color)}.drp-input:disabled{opacity:.6;cursor:not-allowed;background-color:var(--drp-input-background-disabled)}.drp-input.drp-input--xs{font-size:var(--drp-input-size-xs-font);padding:var(--drp-input-size-xs-padding-v) var(--drp-input-size-xs-padding-h);padding-right:calc(var(--drp-input-size-xs-padding-h) * 2.5);height:var(--drp-input-size-xs-height)}.drp-input.drp-input--sm{font-size:var(--drp-input-size-sm-font);padding:var(--drp-input-size-sm-padding-v) var(--drp-input-size-sm-padding-h);padding-right:calc(var(--drp-input-size-sm-padding-h) * 2.5);height:var(--drp-input-size-sm-height)}.drp-input.drp-input--lg{font-size:var(--drp-input-size-lg-font);padding:var(--drp-input-size-lg-padding-v) var(--drp-input-size-lg-padding-h);padding-right:calc(var(--drp-input-size-lg-padding-h) * 2.5);height:var(--drp-input-size-lg-height)}.drp-input.drp-input--xl{font-size:var(--drp-input-size-xl-font);padding:var(--drp-input-size-xl-padding-v) var(--drp-input-size-xl-padding-h);padding-right:calc(var(--drp-input-size-xl-padding-h) * 2.5);height:var(--drp-input-size-xl-height)}.drp-date-picker-input{position:relative;cursor:pointer;display:inline-block;width:100%}.drp-date-picker-input:after{content:"📅";position:absolute;right:var(--drp-input-size-md-padding-h);top:50%;transform:translateY(-50%);pointer-events:none;opacity:var(--drp-input-icon-opacity);font-size:var(--drp-input-size-md-icon-size)}.drp-date-picker-input.drp-date-picker-input--xs:after{right:var(--drp-input-size-xs-padding-h);font-size:var(--drp-input-size-xs-icon-size)}.drp-date-picker-input.drp-date-picker-input--sm:after{right:var(--drp-input-size-sm-padding-h);font-size:var(--drp-input-size-sm-icon-size)}.drp-date-picker-input.drp-date-picker-input--lg:after{right:var(--drp-input-size-lg-padding-h);font-size:var(--drp-input-size-lg-icon-size)}.drp-date-picker-input.drp-date-picker-input--xl:after{right:var(--drp-input-size-xl-padding-h);font-size:var(--drp-input-size-xl-icon-size)}.drp-date-picker{position:absolute;z-index:9500;font-family:var(--drp-font-family, var(--base-font-family, inherit));background:var(--drp-dropdown-background);border:var(--drp-border-width-base) solid var(--drp-border-color);border-radius:var(--drp-border-radius);box-shadow:var(--drp-shadow-xl);padding:var(--drp-spacing-md);min-width:280px;max-width:calc(100vw - 2rem);box-sizing:border-box;-webkit-user-select:none;user-select:none;--drp-badge-row-height: calc(1.6 * var(--drp-rem))}.drp-date-picker:not(.drp-date-picker--visible){display:none}.drp-date-picker--inline{position:relative!important;display:block!important;z-index:auto;min-width:0;max-width:100%;width:fit-content;box-sizing:border-box}.drp-date-picker__months{display:flex;gap:var(--drp-spacing-lg)}.drp-date-picker--inline .drp-date-picker__months{flex-wrap:wrap}.drp-date-picker__months--grid{display:grid;grid-template-columns:repeat(var(--drp-grid-columns, 3),minmax(0,1fr));grid-template-rows:repeat(var(--drp-grid-rows, 2),auto);gap:var(--drp-spacing-lg);width:100%}@media (max-width: 1200px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),3),minmax(0,1fr))}}@media (max-width: 768px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),2),minmax(0,1fr))}}@media (max-width: 480px){.drp-date-picker__months--grid{grid-template-columns:minmax(0,1fr)}}.drp-date-picker__month{flex:1;min-width:280px;display:flex;flex-direction:column}.drp-date-picker--inline .drp-date-picker__month{min-width:250px}.drp-date-picker__months--grid .drp-date-picker__month{min-width:0;width:100%}.drp-date-picker__calendar-container{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}.drp-date-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-md);gap:var(--drp-spacing-sm)}.drp-date-picker__header--static{justify-content:center}.drp-date-picker__header--static .drp-date-picker__month-year{cursor:default}.drp-date-picker__header--static .drp-date-picker__month-year:hover{background-color:transparent}.drp-date-picker__month-year{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-base);color:var(--drp-header-text-color);padding:var(--drp-spacing-sm) var(--drp-spacing-md);border-radius:var(--drp-border-radius);cursor:pointer}.drp-date-picker__month-year:hover{background-color:var(--drp-header-bg-hover)}.drp-date-picker__month-year:active{background-color:var(--drp-header-bg-active)}.drp-date-picker__nav{width:calc(3.2 * var(--drp-rem));height:calc(3.2 * var(--drp-rem));display:flex;align-items:center;justify-content:center;border:var(--drp-border-width-base) solid var(--drp-nav-border-color);border-radius:var(--drp-border-radius);background:transparent;cursor:pointer;font-size:var(--drp-font-size-lg);color:var(--drp-nav-text-color)}.drp-date-picker__nav:hover{background-color:var(--drp-nav-bg-hover);border-color:var(--drp-nav-border-hover)}.drp-date-picker__nav:active{background-color:var(--drp-nav-bg-active)}.drp-date-picker__nav--disabled,.drp-date-picker__nav[disabled]{opacity:.6;cursor:not-allowed;pointer-events:none}.drp-date-picker__nav--disabled:hover,.drp-date-picker__nav[disabled]:hover{background-color:transparent;border-color:var(--drp-nav-border-color)}.drp-date-picker__nav--prev:before{content:"‹"}.drp-date-picker__nav--next:before{content:"›"}.drp-date-picker__rolling-selector{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:10}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible{display:flex}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__weekdays,.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__days{visibility:hidden}.drp-date-picker__rolling-selector{gap:var(--drp-spacing-xs)}.drp-date-picker__rolling-list{flex:1;min-width:0;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-rolling-border-color);border-radius:var(--drp-border-radius);display:flex;flex-direction:column;scroll-behavior:smooth}.drp-date-picker__rolling-list::-webkit-scrollbar{width:6px}.drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-rolling-bg)}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-rolling-scrollbar-thumb);border-radius:3px}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-rolling-scrollbar-thumb-hover)}.drp-date-picker__rolling-item{padding:calc(.4 * var(--drp-rem)) calc(1.6 * var(--drp-rem));cursor:pointer;font-size:calc(1.4 * var(--drp-rem));min-height:calc(3.2 * var(--drp-rem));flex-shrink:0;display:flex;align-items:center;justify-content:var(--drp-rolling-item-justify-content, center)}.drp-date-picker__rolling-item:hover{background-color:var(--drp-rolling-item-bg-hover)}.drp-date-picker__rolling-item--selected{background-color:var(--drp-rolling-item-bg-selected);color:var(--drp-rolling-item-color-selected);font-weight:600}.drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-rolling-item-bg-selected-hover)}.drp-date-picker__rolling-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.drp-date-picker__unified-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-lg);gap:var(--drp-spacing-sm);padding:0 var(--drp-spacing-sm)}.drp-date-picker__unified-range{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-lg);color:var(--drp-unified-range-text-color);padding:var(--drp-spacing-sm) var(--drp-spacing-md);border-radius:var(--drp-border-radius);cursor:pointer}.drp-date-picker__unified-range:hover{background-color:var(--drp-unified-range-bg-hover)}.drp-date-picker__unified-range:active{background-color:var(--drp-unified-range-bg-active)}.drp-date-picker__unified-range--static{cursor:default!important}.drp-date-picker__unified-range--static:hover,.drp-date-picker__unified-range--static:active{background-color:transparent}.drp-date-picker__unified-rolling-selector{position:absolute;top:calc(var(--drp-spacing-lg) + var(--drp-spacing-lg) * 2);left:50%;transform:translate(-50%);width:min(90%,450px);height:350px;max-height:350px;display:none;z-index:100;background:var(--drp-dropdown-background);gap:var(--drp-spacing-xs)}.drp-date-picker__unified-rolling-selector--visible{display:flex}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list{flex:1;min-width:0;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-rolling-border-color);border-radius:var(--drp-border-radius);display:flex;flex-direction:column;scroll-behavior:smooth}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar{width:6px}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-rolling-bg)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-rolling-scrollbar-thumb);border-radius:3px}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-rolling-scrollbar-thumb-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item{padding:calc(.4 * var(--drp-rem)) calc(1.6 * var(--drp-rem));cursor:pointer;font-size:calc(1.4 * var(--drp-rem));min-height:calc(3.2 * var(--drp-rem));flex-shrink:0;display:flex;align-items:center;justify-content:var(--drp-rolling-item-justify-content, center)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item:hover{background-color:var(--drp-rolling-item-bg-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected{background-color:var(--drp-rolling-item-bg-selected);color:var(--drp-rolling-item-color-selected);font-weight:600}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-rolling-item-bg-selected-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--disabled{color:var(--drp-unified-rolling-disabled-color);opacity:.4;cursor:not-allowed}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__nav{display:none}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year{cursor:default;font-size:var(--drp-font-size-base);font-weight:var(--drp-font-weight-normal);color:var(--drp-unified-month-color)}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year:hover{background-color:transparent}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__rolling-selector{display:none!important}.drp-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-sm)}.drp-date-picker__weekday{text-align:center;font-size:var(--drp-font-size-xs);font-weight:var(--drp-font-weight-semibold);color:var(--drp-weekday-color);padding:var(--drp-spacing-xs);text-transform:uppercase}.drp-date-picker__days{display:flex;flex-direction:column;gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-md)}.drp-date-picker__date-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs)}.drp-date-picker__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-sm);color:var(--drp-day-text-color);border-radius:var(--drp-border-radius);cursor:pointer;border:2px solid transparent;position:relative}.drp-date-picker__day:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month){background-color:var(--drp-day-bg-hover);border-color:var(--drp-day-border-hover)}.drp-date-picker__day--today{border-color:var(--drp-day-today-border);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected{background-color:var(--drp-day-selected-bg);color:var(--drp-day-selected-color);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected:hover{background-color:var(--drp-day-selected-bg-hover)}.drp-date-picker__day--focused{outline:2px solid var(--drp-day-focused-outline);outline-offset:2px}.drp-date-picker__day--disabled{color:var(--drp-day-disabled-color);opacity:.6;cursor:not-allowed;position:relative}.drp-date-picker__day--disabled:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 6px);border-radius:var(--drp-border-radius);pointer-events:none}.drp-date-picker__day--disabled:hover{background-color:transparent;border-color:transparent}.drp-date-picker__day--other-month{color:var(--drp-day-other-month-color);opacity:.5}.drp-date-picker__day--other-month.drp-date-picker__day--range-start,.drp-date-picker__day--other-month.drp-date-picker__day--range-end,.drp-date-picker__day--other-month.drp-date-picker__day--in-range,.drp-date-picker__day--other-month.drp-date-picker__day--drag-preview{opacity:1}.drp-date-picker__day--range-start,.drp-date-picker__day--range-end{background-color:var(--drp-day-range-bg);color:var(--drp-day-range-color);font-weight:var(--drp-font-weight-semibold);cursor:grab;-webkit-user-select:none;user-select:none}.drp-date-picker__day--range-start:active,.drp-date-picker__day--range-end:active{cursor:grabbing}.drp-date-picker__day--in-range{background-color:color-mix(in srgb,var(--drp-day-range-bg) 15%,transparent)}.drp-date-picker__day--in-range:hover{background-color:color-mix(in srgb,var(--drp-day-range-bg) 25%,transparent)}.drp-date-picker__day--dragging{cursor:grabbing!important;opacity:.7;transform:scale(1.1);transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__day--drag-preview{background-color:color-mix(in srgb,var(--drp-day-range-bg) 30%,transparent);border:2px dashed var(--drp-day-range-bg)}.drp-date-picker__day--drag-preview.drp-date-picker__day--range-start,.drp-date-picker__day--drag-preview.drp-date-picker__day--range-end{background-color:color-mix(in srgb,var(--drp-day-range-bg) 60%,transparent);color:var(--drp-day-range-color)}.drp-date-picker__day--drag-invalid{background-color:color-mix(in srgb,#ef4444 20%,transparent)!important;border-color:#ef4444!important;border-style:dashed!important}.drp-date-picker__day.holiday{background-color:color-mix(in srgb,#ef4444 10%,transparent)}.drp-date-picker__day.holiday:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,#ef4444 20%,transparent)}.drp-date-picker__day.event{background-color:color-mix(in srgb,#10b981 10%,transparent)}.drp-date-picker__day.event:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,#10b981 20%,transparent)}.drp-date-picker__rolling-item--disabled{color:var(--drp-unified-rolling-disabled-color);opacity:.4;cursor:not-allowed;pointer-events:none;text-decoration:line-through}.drp-date-picker__rolling-item--disabled:hover{background-color:transparent}.drp-date-picker__badge-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);max-height:var(--drp-badge-row-height);min-height:var(--drp-badge-row-height)}.drp-date-picker__badge-cell{display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-2xs);padding:1px 2px;border-radius:2px;cursor:pointer;height:100%;max-height:var(--drp-badge-row-height)}.drp-date-picker__badge-cell:empty{visibility:hidden}.drp-date-picker__badge-cell:hover:not(:empty){transform:scale(1.05)}.drp-date-picker__badge-cell.badge-number{background-color:var(--drp-badge-number-bg);color:var(--drp-badge-number-color);font-size:calc(1.12 * var(--drp-rem));font-weight:600}.drp-date-picker__badge-cell.badge-count{background-color:var(--drp-badge-count-bg);color:var(--drp-badge-count-color);font-size:calc(1.12 * var(--drp-rem));font-weight:700}.drp-date-picker__badge-cell.badge-text{background-color:var(--drp-badge-text-bg);color:var(--drp-badge-text-color);font-size:calc(1.04 * var(--drp-rem));font-weight:700;text-transform:uppercase}.drp-date-picker__summary{text-align:center;padding:var(--drp-spacing-md);border-top:var(--drp-border-width-base) solid var(--drp-summary-border-color);font-size:var(--drp-font-size-sm);color:var(--drp-summary-text-color)}.drp-date-picker__summary--visible{display:block}.drp-date-picker__summary--hidden{display:none}.drp-date-picker__summary-count{font-weight:var(--drp-font-weight-semibold);color:var(--drp-summary-count-color);font-size:var(--drp-font-size-base)}.drp-date-picker__actions{display:flex;gap:var(--drp-spacing-sm);justify-content:space-between;padding-top:var(--drp-spacing-sm);border-top:var(--drp-border-width-base) solid var(--drp-summary-border-color)}.drp-date-picker__button{flex:1;padding:var(--drp-spacing-sm) var(--drp-spacing-md);border:var(--drp-border-width-base) solid var(--drp-button-border-color);border-radius:var(--drp-border-radius);background:transparent;cursor:pointer;font-family:inherit;font-size:var(--drp-font-size-sm);font-weight:var(--drp-font-weight-medium)}.drp-date-picker__button:hover{background-color:var(--drp-button-bg-hover);border-color:var(--drp-button-border-hover)}.drp-date-picker__button:disabled,.drp-date-picker__button[disabled]{opacity:var(--drp-disabled-opacity, .6);cursor:not-allowed;pointer-events:none}.drp-date-picker__button:disabled:hover,.drp-date-picker__button[disabled]:hover{background-color:transparent;border-color:var(--drp-button-border-color)}.drp-date-picker__button--today{color:var(--drp-button-today-color)}.drp-date-picker__button--clear{color:var(--drp-button-clear-color)}.drp-date-picker__button--apply{background-color:var(--drp-button-apply-bg);color:var(--drp-button-apply-color);border-color:var(--drp-button-apply-border)}.drp-date-picker__button--apply:hover{background-color:var(--drp-button-apply-bg-hover)}.drp-date-picker__button--cancel{color:var(--drp-button-cancel-color)}.drp-date-picker__tooltip{position:absolute;z-index:9999;background-color:var(--drp-tooltip-background);color:var(--drp-tooltip-text-color);padding:var(--drp-spacing-xs) var(--drp-spacing-sm);border-radius:var(--drp-border-radius);font-size:var(--drp-font-size-xs);line-height:1.4;max-width:200px;word-wrap:break-word;pointer-events:none;opacity:0;transition:opacity var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__tooltip--visible{opacity:1}.drp-date-picker__tooltip-arrow{position:absolute;background-color:var(--drp-tooltip-background);width:8px;height:8px;transform:rotate(45deg)}.drp-date-picker__loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--drp-loading-overlay-background);display:flex;align-items:center;justify-content:center;z-index:9500;border-radius:var(--drp-border-radius)}.drp-date-picker__loading-spinner{width:40px;height:40px;border:4px solid var(--drp-loading-spinner-color);border-top-color:var(--drp-loading-spinner-accent);border-radius:50%;animation:drp-spin .8s linear infinite}@keyframes drp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drp-date-picker.drp-transitions-enabled .drp-date-picker__badge-cell{transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker.drp-transitions-enabled .drp-date-picker__nav,.drp-date-picker.drp-transitions-enabled .drp-date-picker__action-btn{transition:background-color var(--drp-transition-fast) var(--drp-easing-snappy),border-color var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker.drp-transitions-enabled .drp-date-picker__month-year,.drp-date-picker.drp-transitions-enabled .drp-date-picker__rolling-item{transition:background-color var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker--inline{position:static;display:block;box-shadow:none}
|
|
1
|
+
:host,:root{--drp-rem: 10px;font-family:var(--drp-font-family, var(--base-font-family, inherit));--drp-spacing-xs: calc(.4 * var(--drp-rem));--drp-spacing-sm: calc(.8 * var(--drp-rem));--drp-spacing-md: calc(1.6 * var(--drp-rem));--drp-spacing-lg: calc(2.4 * var(--drp-rem));--drp-spacing-xl: calc(3.2 * var(--drp-rem));--drp-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--drp-rem));--drp-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--drp-rem));--drp-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--drp-rem));--drp-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--drp-rem));--drp-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--drp-rem));--drp-font-size-xl: calc(var(--base-font-size-xl, 2) * var(--drp-rem));--drp-font-size-2xl: calc(var(--base-font-size-2xl, 2.4) * var(--drp-rem));--drp-font-weight-normal: var(--base-font-weight-normal, 400);--drp-font-weight-medium: var(--base-font-weight-medium, 500);--drp-font-weight-semibold: var(--base-font-weight-semibold, 600);--drp-line-height-tight: var(--base-line-height-tight, 1.25);--drp-line-height-normal: var(--base-line-height-normal, 1.5);--drp-line-height-relaxed: var(--base-line-height-relaxed, 1.75);--drp-dropdown-background: var(--base-dropdown-background, #ffffff);--drp-border-color: var(--base-border-color, #e5e7eb);--drp-primary-bg: var(--base-primary-bg, #f3f4f6);--drp-primary-bg-hover: var(--base-primary-bg-hover, #e5e7eb);--drp-accent-color: var(--base-accent-color, #3b82f6);--drp-accent-color-hover: var(--base-accent-color-hover, #2563eb);--drp-text-primary: var(--base-text-color-1, #111827);--drp-text-secondary: var(--base-text-color-3, #6b7280);--drp-text-on-accent: var(--base-text-on-accent, #ffffff);--drp-button-text-color: var(--drp-text-on-accent);--drp-tooltip-background: var(--base-tooltip-background, #111827);--drp-tooltip-text-color: var(--base-tooltip-text-color, #ffffff);--drp-loading-overlay-background: rgba(255, 255, 255, .8);--drp-loading-spinner-color: var(--drp-border-color);--drp-loading-spinner-accent: var(--drp-accent-color);--drp-border-width-base: 1px;--drp-border-radius-sm: calc(var(--base-border-radius-sm, .4) * var(--drp-rem));--drp-border-radius-md: calc(var(--base-border-radius-md, .6) * var(--drp-rem));--drp-border-radius-lg: calc(var(--base-border-radius-lg, .8) * var(--drp-rem));--drp-border-radius: var(--drp-border-radius-md);--drp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--drp-transition-fast: .15s;--drp-easing-snappy: cubic-bezier(.4, 0, .2, 1);--drp-z-index-dropdown: 9500;--drp-z-index-tooltip: 9999;--drp-input-padding-h: calc(1.2 * var(--drp-rem));--drp-grid-columns: 3;--drp-grid-rows: 2;--drp-opacity-disabled: .6;--drp-opacity-other-month: .5;--drp-opacity-hover: .8;--drp-opacity-dragging: .7;--drp-input-background: var(--base-input-background, var(--drp-dropdown-background));--drp-input-color: var(--base-input-color, var(--drp-text-primary));--drp-input-border-color: var(--base-input-border-color, var(--drp-border-color));--drp-input-border-color-hover: var(--base-input-border-color-hover, var(--drp-accent-color));--drp-input-border-color-focus: var(--base-input-border-color-focus, var(--drp-accent-color));--drp-input-placeholder-color: var(--base-input-placeholder-color, var(--drp-text-secondary));--drp-input-background-disabled: var(--base-input-background-disabled, var(--drp-primary-bg));--drp-input-focus-shadow-color: rgba(59, 130, 246, .1);--drp-input-focus-shadow-size: 3px;--drp-input-icon-opacity: .6;--drp-input-size-xs-font: var(--drp-font-size-xs);--drp-input-size-xs-padding-v: var(--drp-spacing-xs);--drp-input-size-xs-padding-h: calc(.8 * var(--drp-rem));--drp-input-size-xs-height: calc(var(--base-input-size-xs-height, 3.1) * var(--drp-rem));--drp-input-size-xs-icon-size: .75em;--drp-input-size-sm-font: calc(1.3 * var(--drp-rem));--drp-input-size-sm-padding-v: calc(.5 * var(--drp-rem));--drp-input-size-sm-padding-h: var(--drp-spacing-sm);--drp-input-size-sm-height: calc(var(--base-input-size-sm-height, 3.3) * var(--drp-rem));--drp-input-size-sm-icon-size: .875em;--drp-input-size-md-font: calc(1.4 * var(--drp-rem));--drp-input-size-md-padding-v: var(--drp-spacing-sm);--drp-input-size-md-padding-h: calc(1.2 * var(--drp-rem));--drp-input-size-md-height: calc(var(--base-input-size-md-height, 3.5) * var(--drp-rem));--drp-input-size-md-icon-size: 1em;--drp-input-size-lg-font: calc(1.6 * var(--drp-rem));--drp-input-size-lg-padding-v: calc(1 * var(--drp-rem));--drp-input-size-lg-padding-h: calc(1.4 * var(--drp-rem));--drp-input-size-lg-height: calc(var(--base-input-size-lg-height, 3.8) * var(--drp-rem));--drp-input-size-lg-icon-size: 1.125em;--drp-input-size-xl-font: calc(1.8 * var(--drp-rem));--drp-input-size-xl-padding-v: calc(1.2 * var(--drp-rem));--drp-input-size-xl-padding-h: calc(1.6 * var(--drp-rem));--drp-input-size-xl-height: calc(var(--base-input-size-xl-height, 4.1) * var(--drp-rem));--drp-input-size-xl-icon-size: 1.25em;--drp-header-text-color: var(--drp-text-primary);--drp-header-bg-hover: var(--drp-primary-bg);--drp-header-bg-active: var(--drp-primary-bg-hover);--drp-nav-text-color: var(--drp-text-primary);--drp-nav-border-color: var(--drp-border-color);--drp-nav-bg-hover: var(--drp-primary-bg);--drp-nav-bg-active: var(--drp-primary-bg-hover);--drp-nav-border-hover: var(--drp-accent-color);--drp-nav-size: calc(3.2 * var(--drp-rem));--drp-rolling-bg: var(--drp-primary-bg);--drp-rolling-border-color: var(--drp-border-color);--drp-rolling-scrollbar-width: 6px;--drp-rolling-scrollbar-thumb: var(--drp-border-color);--drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);--drp-rolling-item-bg-hover: var(--drp-primary-bg);--drp-rolling-item-bg-selected: var(--drp-accent-color);--drp-rolling-item-color-selected: var(--drp-text-on-accent);--drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);--drp-rolling-item-justify-content: center;--drp-rolling-item-min-height: calc(3.2 * var(--drp-rem));--drp-rolling-item-padding-v: var(--drp-spacing-xs);--drp-rolling-item-padding-h: var(--drp-spacing-md);--drp-rolling-item-font-size: var(--drp-font-size-sm);--drp-rolling-item-font-weight-selected: var(--drp-font-weight-semibold);--drp-weekday-color: var(--drp-text-secondary);--drp-day-text-color: var(--drp-text-primary);--drp-day-bg-hover: var(--drp-primary-bg);--drp-day-border-hover: var(--drp-accent-color);--drp-day-today-border: var(--drp-accent-color);--drp-day-selected-bg: var(--drp-accent-color);--drp-day-selected-color: var(--drp-text-on-accent);--drp-day-selected-bg-hover: var(--drp-accent-color-hover);--drp-day-focused-outline: var(--drp-accent-color);--drp-day-disabled-color: var(--drp-text-secondary);--drp-day-other-month-color: var(--drp-text-secondary);--drp-day-range-bg: var(--drp-accent-color);--drp-day-range-color: var(--drp-text-on-accent);--drp-day-border-width: 2px;--drp-day-border-color: transparent;--drp-day-focused-outline-width: 2px;--drp-day-focused-outline-offset: 2px;--drp-day-in-range-bg-opacity: .15;--drp-day-in-range-hover-bg-opacity: .25;--drp-day-drag-preview-bg-opacity: .3;--drp-day-drag-preview-edge-bg-opacity: .6;--drp-day-disabled-pattern-opacity: .1;--drp-day-dragging-scale: 1.1;--drp-day-drag-preview-border-style: dashed;--drp-day-drag-invalid-bg: #ef4444;--drp-day-drag-invalid-bg-opacity: .2;--drp-holiday-color: #ef4444;--drp-holiday-bg-opacity: .1;--drp-holiday-hover-bg-opacity: .2;--drp-event-color: #10b981;--drp-event-bg-opacity: .1;--drp-event-hover-bg-opacity: .2;--drp-summary-text-color: var(--drp-text-secondary);--drp-summary-border-color: var(--drp-border-color);--drp-summary-count-color: var(--drp-accent-color);--drp-button-border-color: var(--drp-border-color);--drp-button-bg-hover: var(--drp-primary-bg);--drp-button-border-hover: var(--drp-accent-color);--drp-button-today-color: var(--drp-accent-color);--drp-button-clear-color: var(--drp-text-secondary);--drp-button-cancel-color: var(--drp-text-secondary);--drp-button-apply-bg: var(--drp-accent-color);--drp-button-apply-color: var(--drp-button-text-color);--drp-button-apply-border: var(--drp-accent-color);--drp-button-apply-bg-hover: var(--drp-accent-color-hover);--drp-badge-font-size: var(--drp-font-size-2xs);--drp-badge-padding-v: 1px;--drp-badge-padding-h: 2px;--drp-badge-border-radius: 2px;--drp-badge-max-height: var(--drp-font-size-base);--drp-badge-row-height: var(--drp-badge-max-height);--drp-badge-number-bg: var(--drp-accent-color);--drp-badge-number-color: var(--drp-text-on-accent);--drp-badge-count-bg: #ef4444;--drp-badge-count-color: #ffffff;--drp-badge-text-bg: var(--drp-text-secondary);--drp-badge-text-color: #ffffff;--drp-unified-range-text-color: var(--drp-text-primary);--drp-unified-range-bg-hover: var(--drp-primary-bg);--drp-unified-range-bg-active: var(--drp-primary-bg-hover);--drp-unified-month-color: var(--drp-text-secondary);--drp-unified-rolling-disabled-color: var(--drp-text-secondary);--drp-tooltip-line-height: 1.4;--drp-tooltip-max-width: 200px;--drp-tooltip-arrow-size: 8px;--drp-month-min-width: 280px;--drp-month-min-width-inline: 250px;--drp-calendar-max-width: calc(100vw - 2rem) }.drp-input{width:100%;font-family:var(--drp-font-family, var(--base-font-family, inherit));font-size:var(--drp-input-size-md-font);line-height:var(--drp-line-height-normal);color:var(--drp-input-color);background-color:var(--drp-input-background);border:var(--drp-border-width-base) solid var(--drp-input-border-color);border-radius:var(--drp-border-radius);padding:var(--drp-input-size-md-padding-v) var(--drp-input-size-md-padding-h);padding-right:calc(var(--drp-input-size-md-padding-h) * 2.5);height:var(--drp-input-size-md-height);box-sizing:border-box;transition:border-color var(--drp-transition-fast) var(--drp-easing-snappy),box-shadow var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-input::placeholder{color:var(--drp-input-placeholder-color);opacity:.6}.drp-input:hover:not(:disabled){border-color:var(--drp-input-border-color-hover)}.drp-input:focus{outline:none;border-color:var(--drp-input-border-color-focus);box-shadow:0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color)}.drp-input:disabled{opacity:var(--drp-opacity-disabled);cursor:not-allowed;background-color:var(--drp-input-background-disabled)}.drp-input.drp-input--xs{font-size:var(--drp-input-size-xs-font);padding:var(--drp-input-size-xs-padding-v) var(--drp-input-size-xs-padding-h);padding-right:calc(var(--drp-input-size-xs-padding-h) * 2.5);height:var(--drp-input-size-xs-height)}.drp-input.drp-input--sm{font-size:var(--drp-input-size-sm-font);padding:var(--drp-input-size-sm-padding-v) var(--drp-input-size-sm-padding-h);padding-right:calc(var(--drp-input-size-sm-padding-h) * 2.5);height:var(--drp-input-size-sm-height)}.drp-input.drp-input--lg{font-size:var(--drp-input-size-lg-font);padding:var(--drp-input-size-lg-padding-v) var(--drp-input-size-lg-padding-h);padding-right:calc(var(--drp-input-size-lg-padding-h) * 2.5);height:var(--drp-input-size-lg-height)}.drp-input.drp-input--xl{font-size:var(--drp-input-size-xl-font);padding:var(--drp-input-size-xl-padding-v) var(--drp-input-size-xl-padding-h);padding-right:calc(var(--drp-input-size-xl-padding-h) * 2.5);height:var(--drp-input-size-xl-height)}.drp-date-picker-input{position:relative;cursor:pointer;display:inline-block;width:100%}.drp-date-picker-input:after{content:"📅";position:absolute;right:var(--drp-input-size-md-padding-h);top:50%;transform:translateY(-50%);pointer-events:none;opacity:var(--drp-input-icon-opacity);font-size:var(--drp-input-size-md-icon-size)}.drp-date-picker-input.drp-date-picker-input--xs:after{right:var(--drp-input-size-xs-padding-h);font-size:var(--drp-input-size-xs-icon-size)}.drp-date-picker-input.drp-date-picker-input--sm:after{right:var(--drp-input-size-sm-padding-h);font-size:var(--drp-input-size-sm-icon-size)}.drp-date-picker-input.drp-date-picker-input--lg:after{right:var(--drp-input-size-lg-padding-h);font-size:var(--drp-input-size-lg-icon-size)}.drp-date-picker-input.drp-date-picker-input--xl:after{right:var(--drp-input-size-xl-padding-h);font-size:var(--drp-input-size-xl-icon-size)}.drp-date-picker{position:absolute;z-index:var(--drp-z-index-dropdown);font-family:var(--drp-font-family, var(--base-font-family, inherit));background:var(--drp-dropdown-background);border:var(--drp-border-width-base) solid var(--drp-border-color);border-radius:var(--drp-border-radius-lg);box-shadow:var(--drp-shadow-xl);padding:var(--drp-spacing-md);min-width:var(--drp-month-min-width);max-width:var(--drp-calendar-max-width);box-sizing:border-box;-webkit-user-select:none;user-select:none}.drp-date-picker:not(.drp-date-picker--visible){display:none}.drp-date-picker--inline{position:relative!important;display:block!important;z-index:auto;min-width:0;max-width:100%;width:fit-content;box-sizing:border-box}.drp-date-picker__months{display:flex;gap:var(--drp-spacing-lg)}.drp-date-picker--inline .drp-date-picker__months{flex-wrap:wrap}.drp-date-picker__months--grid{display:grid;grid-template-columns:repeat(var(--drp-grid-columns, 3),minmax(0,1fr));grid-template-rows:repeat(var(--drp-grid-rows, 2),auto);gap:var(--drp-spacing-lg);width:100%}@media (max-width: 1200px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),3),minmax(0,1fr))}}@media (max-width: 768px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),2),minmax(0,1fr))}}@media (max-width: 480px){.drp-date-picker__months--grid{grid-template-columns:minmax(0,1fr)}}.drp-date-picker__month{flex:1;min-width:var(--drp-month-min-width);display:flex;flex-direction:column}.drp-date-picker--inline .drp-date-picker__month{min-width:var(--drp-month-min-width-inline)}.drp-date-picker__months--grid .drp-date-picker__month{min-width:0;width:100%}.drp-date-picker__calendar-container{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}.drp-date-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-md);gap:var(--drp-spacing-sm)}.drp-date-picker__header--static{justify-content:center}.drp-date-picker__header--static .drp-date-picker__month-year{cursor:default}.drp-date-picker__header--static .drp-date-picker__month-year:hover{background-color:transparent}.drp-date-picker__month-year{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-base);color:var(--drp-header-text-color);padding:var(--drp-spacing-sm) var(--drp-spacing-md);border-radius:var(--drp-border-radius);cursor:pointer}.drp-date-picker__month-year:hover{background-color:var(--drp-header-bg-hover)}.drp-date-picker__month-year:active{background-color:var(--drp-header-bg-active)}.drp-date-picker__nav{width:var(--drp-nav-size);height:var(--drp-nav-size);display:flex;align-items:center;justify-content:center;border:var(--drp-border-width-base) solid var(--drp-nav-border-color);border-radius:var(--drp-border-radius);background:transparent;cursor:pointer;font-size:var(--drp-font-size-lg);color:var(--drp-nav-text-color)}.drp-date-picker__nav:hover{background-color:var(--drp-nav-bg-hover);border-color:var(--drp-nav-border-hover)}.drp-date-picker__nav:active{background-color:var(--drp-nav-bg-active)}.drp-date-picker__nav--disabled,.drp-date-picker__nav[disabled]{opacity:var(--drp-opacity-disabled);cursor:not-allowed;pointer-events:none}.drp-date-picker__nav--disabled:hover,.drp-date-picker__nav[disabled]:hover{background-color:transparent;border-color:var(--drp-nav-border-color)}.drp-date-picker__nav--prev:before{content:"‹"}.drp-date-picker__nav--next:before{content:"›"}.drp-date-picker__rolling-selector{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:10;gap:var(--drp-spacing-xs)}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible{display:flex}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__weekdays,.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__days{visibility:hidden}.drp-date-picker__rolling-list{flex:1;min-width:0;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-rolling-border-color);border-radius:var(--drp-border-radius-lg);display:flex;flex-direction:column;scroll-behavior:smooth}.drp-date-picker__rolling-list::-webkit-scrollbar{width:var(--drp-rolling-scrollbar-width)}.drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-rolling-bg)}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-rolling-scrollbar-thumb);border-radius:3px}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-rolling-scrollbar-thumb-hover)}.drp-date-picker__rolling-item{padding:var(--drp-rolling-item-padding-v) var(--drp-rolling-item-padding-h);cursor:pointer;font-size:var(--drp-rolling-item-font-size);min-height:var(--drp-rolling-item-min-height);flex-shrink:0;display:flex;align-items:center;justify-content:var(--drp-rolling-item-justify-content)}.drp-date-picker__rolling-item:hover{background-color:var(--drp-rolling-item-bg-hover)}.drp-date-picker__rolling-item--selected{background-color:var(--drp-rolling-item-bg-selected);color:var(--drp-rolling-item-color-selected);font-weight:var(--drp-rolling-item-font-weight-selected)}.drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-rolling-item-bg-selected-hover)}.drp-date-picker__rolling-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.drp-date-picker__unified-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-lg);gap:var(--drp-spacing-sm);padding:0 var(--drp-spacing-sm)}.drp-date-picker__unified-range{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-lg);color:var(--drp-unified-range-text-color);padding:var(--drp-spacing-sm) var(--drp-spacing-md);border-radius:var(--drp-border-radius);cursor:pointer}.drp-date-picker__unified-range:hover{background-color:var(--drp-unified-range-bg-hover)}.drp-date-picker__unified-range:active{background-color:var(--drp-unified-range-bg-active)}.drp-date-picker__unified-range--static{cursor:default!important}.drp-date-picker__unified-range--static:hover,.drp-date-picker__unified-range--static:active{background-color:transparent}.drp-date-picker__unified-rolling-selector{position:absolute;top:calc(var(--drp-spacing-lg) + var(--drp-spacing-lg) * 2);left:50%;transform:translate(-50%);width:min(90%,450px);height:350px;max-height:350px;display:none;z-index:100;background:var(--drp-dropdown-background);gap:var(--drp-spacing-xs)}.drp-date-picker__unified-rolling-selector--visible{display:flex}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list{flex:1;min-width:0;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-rolling-border-color);border-radius:var(--drp-border-radius-lg);display:flex;flex-direction:column;scroll-behavior:smooth}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar{width:var(--drp-rolling-scrollbar-width)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-rolling-bg)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-rolling-scrollbar-thumb);border-radius:3px}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-rolling-scrollbar-thumb-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item{padding:var(--drp-rolling-item-padding-v) var(--drp-rolling-item-padding-h);cursor:pointer;font-size:var(--drp-rolling-item-font-size);min-height:var(--drp-rolling-item-min-height);flex-shrink:0;display:flex;align-items:center;justify-content:var(--drp-rolling-item-justify-content)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item:hover{background-color:var(--drp-rolling-item-bg-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected{background-color:var(--drp-rolling-item-bg-selected);color:var(--drp-rolling-item-color-selected);font-weight:var(--drp-rolling-item-font-weight-selected)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-rolling-item-bg-selected-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--disabled{color:var(--drp-unified-rolling-disabled-color);opacity:.4;cursor:not-allowed}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__nav{display:none}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year{cursor:default;font-size:var(--drp-font-size-base);font-weight:var(--drp-font-weight-normal);color:var(--drp-unified-month-color)}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year:hover{background-color:transparent}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__rolling-selector{display:none!important}.drp-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-sm)}.drp-date-picker__weekday{text-align:center;font-size:var(--drp-font-size-xs);font-weight:var(--drp-font-weight-semibold);color:var(--drp-weekday-color);padding:var(--drp-spacing-xs);text-transform:uppercase}.drp-date-picker__days{display:flex;flex-direction:column;gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-md)}.drp-date-picker__date-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs)}.drp-date-picker__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-sm);color:var(--drp-day-text-color);border-radius:var(--drp-border-radius-sm);cursor:pointer;border:var(--drp-day-border-width) solid var(--drp-day-border-color);position:relative}.drp-date-picker__day:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month){background-color:var(--drp-day-bg-hover);border-color:var(--drp-day-border-hover)}.drp-date-picker__day--today{border-color:var(--drp-day-today-border);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected{background-color:var(--drp-day-selected-bg);color:var(--drp-day-selected-color);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected:hover{background-color:var(--drp-day-selected-bg-hover)}.drp-date-picker__day--focused{outline:var(--drp-day-focused-outline-width) solid var(--drp-day-focused-outline);outline-offset:var(--drp-day-focused-outline-offset)}.drp-date-picker__day--disabled{color:var(--drp-day-disabled-color);opacity:var(--drp-opacity-disabled);cursor:not-allowed;position:relative}.drp-date-picker__day--disabled:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,var(--drp-day-disabled-pattern-opacity)) 0px,rgba(0,0,0,var(--drp-day-disabled-pattern-opacity)) 1px,transparent 1px,transparent 6px);border-radius:var(--drp-border-radius-sm);pointer-events:none}.drp-date-picker__day--disabled:hover{background-color:transparent;border-color:transparent}.drp-date-picker__day--disabled.drp-date-picker__day--in-range{background-color:color-mix(in srgb,var(--drp-day-range-bg) calc(var(--drp-day-in-range-bg-opacity) * 100%),transparent)}.drp-date-picker__day--other-month{color:var(--drp-day-other-month-color);opacity:var(--drp-opacity-other-month)}.drp-date-picker__day--other-month.drp-date-picker__day--range-start,.drp-date-picker__day--other-month.drp-date-picker__day--range-end,.drp-date-picker__day--other-month.drp-date-picker__day--in-range,.drp-date-picker__day--other-month.drp-date-picker__day--drag-preview{opacity:1}.drp-date-picker__day--range-start,.drp-date-picker__day--range-end{background-color:var(--drp-day-range-bg);color:var(--drp-day-range-color);font-weight:var(--drp-font-weight-semibold);cursor:grab;-webkit-user-select:none;user-select:none}.drp-date-picker__day--range-start:active,.drp-date-picker__day--range-end:active{cursor:grabbing}.drp-date-picker__day--in-range{background-color:color-mix(in srgb,var(--drp-day-range-bg) calc(var(--drp-day-in-range-bg-opacity) * 100%),transparent)}.drp-date-picker__day--in-range:hover{background-color:color-mix(in srgb,var(--drp-day-range-bg) calc(var(--drp-day-in-range-hover-bg-opacity) * 100%),transparent)}.drp-date-picker__day--dragging{cursor:grabbing!important;opacity:var(--drp-opacity-dragging);transform:scale(var(--drp-day-dragging-scale));transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__day--drag-preview{background-color:color-mix(in srgb,var(--drp-day-range-bg) calc(var(--drp-day-drag-preview-bg-opacity) * 100%),transparent);border:var(--drp-day-border-width) var(--drp-day-drag-preview-border-style) var(--drp-day-range-bg)}.drp-date-picker__day--drag-preview.drp-date-picker__day--range-start,.drp-date-picker__day--drag-preview.drp-date-picker__day--range-end{background-color:color-mix(in srgb,var(--drp-day-range-bg) calc(var(--drp-day-drag-preview-edge-bg-opacity) * 100%),transparent);color:var(--drp-day-range-color)}.drp-date-picker__day--drag-invalid{background-color:color-mix(in srgb,var(--drp-day-drag-invalid-bg) calc(var(--drp-day-drag-invalid-bg-opacity) * 100%),transparent)!important;border-color:var(--drp-day-drag-invalid-bg)!important;border-style:dashed!important}.drp-date-picker__day.holiday{background-color:color-mix(in srgb,var(--drp-holiday-color) calc(var(--drp-holiday-bg-opacity) * 100%),transparent)}.drp-date-picker__day.holiday:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,var(--drp-holiday-color) calc(var(--drp-holiday-hover-bg-opacity) * 100%),transparent)}.drp-date-picker__day.event{background-color:color-mix(in srgb,var(--drp-event-color) calc(var(--drp-event-bg-opacity) * 100%),transparent)}.drp-date-picker__day.event:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,var(--drp-event-color) calc(var(--drp-event-hover-bg-opacity) * 100%),transparent)}.drp-date-picker__rolling-item--disabled{color:var(--drp-unified-rolling-disabled-color);opacity:.4;cursor:not-allowed;pointer-events:none;text-decoration:line-through}.drp-date-picker__rolling-item--disabled:hover{background-color:transparent}.drp-date-picker__badge-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);max-height:var(--drp-badge-row-height);min-height:var(--drp-badge-row-height)}.drp-date-picker__badge-cell{display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-2xs);padding:var(--drp-badge-padding-v) var(--drp-badge-padding-h);border-radius:var(--drp-badge-border-radius);cursor:pointer;max-height:var(--drp-badge-row-height)}.drp-date-picker__badge-cell:empty{visibility:hidden}.drp-date-picker__badge-cell:hover:not(:empty){transform:scale(1.05)}.drp-date-picker__badge-cell.badge-number{background-color:var(--drp-badge-number-bg);color:var(--drp-badge-number-color);font-size:calc(1.12 * var(--drp-rem));font-weight:600}.drp-date-picker__badge-cell.badge-count{background-color:var(--drp-badge-count-bg);color:var(--drp-badge-count-color);font-size:calc(1.12 * var(--drp-rem));font-weight:700}.drp-date-picker__badge-cell.badge-text{background-color:var(--drp-badge-text-bg);color:var(--drp-badge-text-color);font-size:calc(1.04 * var(--drp-rem));font-weight:700;text-transform:uppercase}.drp-date-picker__summary{text-align:center;padding:var(--drp-spacing-md);border-top:var(--drp-border-width-base) solid var(--drp-summary-border-color);font-size:var(--drp-font-size-sm);color:var(--drp-summary-text-color)}.drp-date-picker__summary--visible{display:block}.drp-date-picker__summary--hidden{display:none}.drp-date-picker__summary-count{font-weight:var(--drp-font-weight-semibold);color:var(--drp-summary-count-color);font-size:var(--drp-font-size-base)}.drp-date-picker__actions{display:flex;gap:var(--drp-spacing-sm);justify-content:space-between;padding-top:var(--drp-spacing-sm);border-top:var(--drp-border-width-base) solid var(--drp-summary-border-color)}.drp-date-picker__button{flex:1;padding:var(--drp-spacing-sm) var(--drp-spacing-md);border:var(--drp-border-width-base) solid var(--drp-button-border-color);border-radius:var(--drp-border-radius);background:transparent;cursor:pointer;font-family:inherit;font-size:var(--drp-font-size-sm);font-weight:var(--drp-font-weight-medium)}.drp-date-picker__button:hover{background-color:var(--drp-button-bg-hover);border-color:var(--drp-button-border-hover)}.drp-date-picker__button:disabled,.drp-date-picker__button[disabled]{opacity:var(--drp-opacity-disabled);cursor:not-allowed;pointer-events:none}.drp-date-picker__button:disabled:hover,.drp-date-picker__button[disabled]:hover{background-color:transparent;border-color:var(--drp-button-border-color)}.drp-date-picker__button--today{color:var(--drp-button-today-color)}.drp-date-picker__button--clear{color:var(--drp-button-clear-color)}.drp-date-picker__button--apply{background-color:var(--drp-button-apply-bg);color:var(--drp-button-apply-color);border-color:var(--drp-button-apply-border)}.drp-date-picker__button--apply:hover{background-color:var(--drp-button-apply-bg-hover)}.drp-date-picker__button--cancel{color:var(--drp-button-cancel-color)}.drp-date-picker__tooltip{position:absolute;z-index:var(--drp-z-index-tooltip);background-color:var(--drp-tooltip-background);color:var(--drp-tooltip-text-color);padding:var(--drp-spacing-xs) var(--drp-spacing-sm);border-radius:var(--drp-border-radius-sm);font-size:var(--drp-font-size-xs);line-height:var(--drp-tooltip-line-height);max-width:var(--drp-tooltip-max-width);word-wrap:break-word;pointer-events:none;opacity:0;transition:opacity var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__tooltip--visible{opacity:1}.drp-date-picker__tooltip-arrow{position:absolute;background-color:var(--drp-tooltip-background);width:var(--drp-tooltip-arrow-size);height:var(--drp-tooltip-arrow-size);transform:rotate(45deg)}.drp-date-picker__loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--drp-loading-overlay-background);display:flex;align-items:center;justify-content:center;z-index:var(--drp-z-index-dropdown);border-radius:var(--drp-border-radius-lg)}.drp-date-picker__loading-spinner{width:40px;height:40px;border:4px solid var(--drp-loading-spinner-color);border-top-color:var(--drp-loading-spinner-accent);border-radius:50%;animation:drp-spin .8s linear infinite}@keyframes drp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drp-date-picker.drp-transitions-enabled .drp-date-picker__badge-cell{transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker.drp-transitions-enabled .drp-date-picker__nav,.drp-date-picker.drp-transitions-enabled .drp-date-picker__action-btn{transition:background-color var(--drp-transition-fast) var(--drp-easing-snappy),border-color var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker.drp-transitions-enabled .drp-date-picker__month-year,.drp-date-picker.drp-transitions-enabled .drp-date-picker__rolling-item{transition:background-color var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker--inline{position:static;display:block;box-shadow:none}
|