@rnwonder/react-date-picker/themes/ark-ui.css

A simple and reusable Datepicker component for ReactJS ([Demo](https://stackblitz.com/edit/solidjs-templates-dof6jl?file=src%2FApp.tsx))

:root{--ark-colors-accent-default:#eb5e41;--ark-colors-fg-inverted-default:#fff;--ark-colors-bg-subtle:#f5f5f4;--ark-colors-fg-emphasized:#44403c;--ark-colors-fg-default:#1c1917;--ark-colors-fg-emphasized-reverse:#44403c;--ark-colors-bg-disabled:#f3f4f4;--ark-size-1:0.875rem;--ark-size-2:2.25rem;--ark-size-3:2.5rem;--ark-spacing-1:1.5rem}.date-prev-next-btn,.selector-prev-next-btn{height:var(--ark-size-2);width:var(--ark-size-2)}.date-picker-main-btn:not(.time-picker-meridiem-btn){height:var(--ark-size-2);min-width:var(--ark-size-2);text-transform:capitalize}.dark .date-picker-main-btn:not(.time-picker-meridiem-btn):disabled,.date-picker-main-btn:not(.time-picker-meridiem-btn):disabled,[data-theme=dark] .date-picker-main-btn:not(.time-picker-meridiem-btn):disabled{background-color:var(--ark-colors-bg-disabled);color:var(--ark-colors-fg-emphasized)}.dark [data-selector-type=selector-option-out-of-range]:disabled,[data-selector-type=selector-option-out-of-range]:disabled,[data-theme=dark] [data-selector-type=selector-option-out-of-range]:disabled{background-color:transparent}.dark .date-picker-main-btn:not(.time-picker-meridiem-btn):hover,.date-picker-main-btn:not(.time-picker-meridiem-btn):hover,[data-theme=dark] .date-picker-main-btn:not(.time-picker-meridiem-btn):hover{background-color:var(--ark-colors-bg-subtle)}.dark .date-prev-next-btn,.dark .date-prev-next-btn:hover,.dark .date-selector-trigger,.dark .date-selector-trigger:hover,.dark .selector-prev-next-btn,.dark .selector-prev-next-btn:hover,.date-prev-next-btn,.date-prev-next-btn:hover,.date-selector-trigger,.date-selector-trigger:hover,.selector-prev-next-btn,.selector-prev-next-btn:hover,[data-theme=dark] .date-prev-next-btn,[data-theme=dark] .date-prev-next-btn:hover,[data-theme=dark] .date-selector-trigger,[data-theme=dark] .date-selector-trigger:hover,[data-theme=dark] .selector-prev-next-btn,[data-theme=dark] .selector-prev-next-btn:hover{background-color:transparent;color:var(--ark-colors-fg-emphasized)}.date-prev-next-btn>svg,.selector-prev-next-btn>svg{width:1em;height:1em}.date-selector-trigger{font-size:var(--ark-size-1);text-transform:capitalize;font-weight:600}.dark .date-selector-option [data-theme=dark] .date-selector-option,.date-selector-option{min-height:var(--ark-size-3);font-weight:400;color:var(--ark-colors-fg-emphasized)}.dark [date-selector-option-selected=true],.dark [date-selector-option-selected=true]:hover,[data-theme=dark] [date-selector-option-selected=true],[data-theme=dark] [date-selector-option-selected=true]:hover,[date-selector-option-selected=true],[date-selector-option-selected=true]:hover{background-color:var(--ark-colors-bg-subtle);color:var(--ark-colors-accent-default)}.dark .date-picker-weekday-name,.date-picker-weekday-name,[data-theme=dark] .date-picker-weekday-name{height:var(--ark-size-3);width:var(--ark-size-3);display:flex;align-items:center;justify-content:center;font-size:var(--ark-size-1);font-weight:500;color:var(--ark-colors-fg-default)}.dark .date-picker-day-number-area::before,.date-picker-day-number-area::before,[data-theme=dark] .date-picker-day-number-area::before{background-color:var(--ark-colors-bg-subtle)}.dark .date-picker-day-number,.date-picker-day-number,[data-theme=dark] .date-picker-day-number{min-height:var(--ark-size-3);min-width:var(--ark-size-3);border-radius:.5rem;font-size:var(--ark-size-1);font-weight:400;color:var(--ark-colors-fg-emphasized)}[data-day-number-current-day=true],[data-day-number-current-day=true]:hover{border:none}.dark [data-day-number-current-day=true]::before,[data-day-number-current-day=true]::before,[data-theme=dark][data-day-number-current-day=true]::before{content:"•";color:var(--ark-colors-accent-default);position:absolute;margin-top:var(--ark-spacing-1);border-style:solid;font-size:1rem}.dark [data-day-number-area-range-between=true],[data-day-number-area-range-between=true],[data-theme=dark] [data-day-number-area-range-between=true]{background-color:var(--ark-colors-bg-subtle)}.dark [data-highlight-weekend=true][data-day-number-is-weekend=true],[data-highlight-weekend=true][data-day-number-is-weekend=true],[data-theme=dark] [data-highlight-weekend=true][data-day-number-is-weekend=true]{color:var(--ark-colors-accent-default)}.dark [data-day-number-selected=true],.dark [data-day-number-selected=true]:hover,.dark [data-day-number-selected=true][data-highlight-weekend=true],[data-day-number-selected=true],[data-day-number-selected=true]:hover,[data-day-number-selected=true][data-highlight-weekend=true],[data-theme=dark] [data-day-number-selected=true],[data-theme=dark] [data-day-number-selected=true]:hover,[data-theme=dark] [data-day-number-selected=true][data-highlight-weekend=true]{background-color:var(--ark-colors-accent-default);color:var(--ark-colors-fg-inverted-default)}.dark [data-day-number-range-end-selected=false][data-day-number-selected=true],[data-day-number-range-end-selected=false][data-day-number-selected=true],[data-theme=dark] [data-day-number-range-end-selected=false][data-day-number-selected=true]{background-color:var(--ark-colors-bg-subtle);color:var(--ark-colors-accent-default)}.dark [data-day-number-range-end-selected=true][data-day-number-selected=true][data-day-number-current-day=true]::before,[data-day-number-range-end-selected=true][data-day-number-selected=true][data-day-number-current-day=true]::before,[data-theme=dark] [data-day-number-range-end-selected=true][data-day-number-selected=true][data-day-number-current-day=true]::before{color:var(--ark-colors-fg-inverted-default)}@media (max-width:620px){.date-picker-calendar-wrapper{flex-direction:column}}@media (max-width:320px){:root{--ark-size-1:0.875rem;--ark-size-2:1.75rem;--ark-size-3:2.15rem;--ark-spacing-1:1.5rem}}.dark,[data-theme=dark]{--ark-colors-bg-subtle:#343434;--ark-colors-fg-emphasized:#e1e1e1;--ark-colors-fg-default:#e8e8e8;--ark-colors-bg-disabled:#252525}