@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/datepicker/_datepicker.scss

@@ -0,0 +1,841 @@
+// Name:            DatePicker
+// Description:     Component to create DatePicker
+//
+// Component:       `uk-datepicker`
+//
+// Modifier:        `uk-datepicker-single`
+//                  `uk-datepicker-multiple`
+//                  `uk-control-small`
+//                  `uk-control-medium`
+//                  `uk-control-large`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin datepicker-styles {
+    /* ========================================================================
+       Component: Picker
+     ========================================================================== */
+
+    [class^='#{$prefix}-datepicker'],
+    [class*=' #{$prefix}-datepicker'],
+    [class^='#{$prefix}-datepicker']::before,
+    [class*=' #{$prefix}-datepicker']::before,
+    [class^='#{$prefix}-datepicker']::after,
+    [class*=' #{$prefix}-datepicker']::after {
+        box-sizing: border-box;
+    }
+
+    .#{$prefix}-datepicker {
+        align-items: center;
+        background-color: var(--control-background);
+        border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+        border-radius: var(--control-border-radius);
+        color: var(--control-color);
+        cursor: text;
+        display: flex;
+        font-size: inherit;
+        padding-left: var(--control-padding-horizontal);
+        padding-right: var(--control-padding-horizontal);
+        position: relative;
+        transition: all var(--transition-duration);
+        @if map.has-key($mixins, 'hook-datepicker') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker'));
+        }
+    }
+
+    /* Hover state (unused for disabled state) */
+    .#{$prefix}-datepicker:hover {
+        background-color: var(--control-hover-background);
+        border-color: var(--control-hover-border);
+        color: var(--control-hover-color);
+        @if map.has-key($mixins, 'hook-datepicker-hover') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-hover'));
+        }
+    }
+
+    /* Focus state (unused for disabled state) */
+    .#{$prefix}-datepicker:focus,
+    .#{$prefix}-datepicker:focus-within,
+    .#{$prefix}-datepicker-focused {
+        background-color: var(--control-focus-background);
+        border-color: var(--control-focus-border);
+        color: var(--control-focus-color);
+        outline: none;
+        @if map.has-key($mixins, 'hook-datepicker-focus') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-focus'));
+        }
+    }
+
+    /* Disabled state */
+    .#{$prefix}-datepicker-disabled {
+        background-color: var(--control-disabled-background);
+        @if map.has-key($mixins, 'hook-datepicker-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-disabled'));
+        }
+    }
+
+    .#{$prefix}-datepicker-disabled .#{$prefix}-control.#{$prefix}-disabled {
+        background: none;
+    }
+
+
+    /* Control Input
+     ========================================================================== */
+
+    .#{$prefix}-datepicker .#{$prefix}-datepicker-input {
+        align-items: center;
+        display: inline-flex;
+        position: relative;
+        width: 100%;
+        @if map.has-key($mixins, 'hook-datepicker-input') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-input'));
+        }
+    }
+
+    .#{$prefix}-datepicker .#{$prefix}-datepicker-input .#{$prefix}-control {
+        border: 0 none;
+        flex: 1;
+        min-height: var(--datepicker-height);
+        min-width: 1px;
+        padding: 0;
+        @if map.has-key($mixins, 'hook-datepicker-control') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-control'));
+        }
+    }
+
+
+    /* Size modifier
+     ========================================================================== */
+
+    /*
+     * Small
+     */
+
+    .#{$prefix}-datepicker-small {
+        font-size: var(--control-small-font-size);
+        padding: 0 var(--control-small-padding-horizontal);
+        @if map.has-key($mixins, 'hook-datepicker-small') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-small'));
+        }
+    }
+
+    .#{$prefix}-datepicker-small .#{$prefix}-datepicker-input .#{$prefix}-control {
+        min-height: var(--datepicker-small-height);
+    }
+
+    /*
+     * Medium
+     */
+
+    .#{$prefix}-datepicker-medium {
+        font-size: var(--control-medium-font-size);
+        padding: 0 var(--control-medium-padding-horizontal);
+        @if map.has-key($mixins, 'hook-datepicker-medium') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-medium'));
+        }
+    }
+
+    .#{$prefix}-datepicker-medium .#{$prefix}-datepicker-input .#{$prefix}-control {
+        min-height: var(--datepicker-medium-height);
+    }
+
+    /*
+     * Large
+     */
+
+    .#{$prefix}-datepicker-large {
+        font-size: var(--control-large-font-size);
+        padding: 0 var(--control-large-padding-horizontal);
+        @if map.has-key($mixins, 'hook-datepicker-large') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-large'));
+        }
+    }
+
+    .#{$prefix}-datepicker-large .#{$prefix}-datepicker-input .#{$prefix}-control {
+        min-height: var(--datepicker-large-height);
+    }
+
+
+    /* Style modifier
+     ========================================================================== */
+
+    /*
+     * Success
+     */
+
+    .#{$prefix}-datepicker-success,
+    .#{$prefix}-datepicker-success:hover,
+    .#{$prefix}-datepicker-success:focus-within {
+        border-color: var(--datepicker-success-border);
+        color: var(--datepicker-success-color);
+        @if map.has-key($mixins, 'hook-datepicker-success') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-success'));
+        }
+    }
+
+    /*
+     * Warning
+     */
+
+    .#{$prefix}-datepicker-warning,
+    .#{$prefix}-datepicker-warning:hover,
+    .#{$prefix}-datepicker-warning:focus-within {
+        border-color: var(--datepicker-warning-border);
+        color: var(--datepicker-warning-color);
+        @if map.has-key($mixins, 'hook-datepicker-warning') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-warning'));
+        }
+    }
+
+    /*
+     * Danger
+     */
+
+    .#{$prefix}-datepicker-danger,
+    .#{$prefix}-datepicker-danger:hover,
+    .#{$prefix}-datepicker-danger:focus-within {
+        border-color: var(--datepicker-danger-border);
+        color: var(--datepicker-danger-color);
+        @if map.has-key($mixins, 'hook-datepicker-danger') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-danger'));
+        }
+    }
+
+    /*
+     * Blank
+     */
+
+    .#{$prefix}-datepicker-blank,
+    .#{$prefix}-datepicker-blank:hover,
+    .#{$prefix}-datepicker-blank:focus-within {
+        background-color: transparent;
+        border-color: transparent;
+        border-style: var(--datepicker-blank-border-style);
+        @if map.has-key($mixins, 'hook-datepicker-blank') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-blank'));
+        }
+    }
+
+    .#{$prefix}-datepicker-blank:focus-within {
+        border-color: var(--datepicker-blank-focus-border);
+        @if map.has-key($mixins, 'hook-datepicker-blank-focus') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-blank-focus'));
+        }
+    }
+
+
+    /* Panel
+     ========================================================================== */
+
+    .#{$prefix}-datepicker-panel-layout {
+        align-items: stretch;
+        display: flex;
+        flex-wrap: nowrap;
+        @if map.has-key($mixins, 'hook-datepicker-panel-layout') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-panel-layout'));
+        }
+    }
+
+    .#{$prefix}-datepicker-panel {
+        border: 0 none;
+        border-radius: 0;
+        display: inline-flex;
+        flex-direction: column;
+        text-align: center;
+        vertical-align: top;
+        @if map.has-key($mixins, 'hook-datepicker-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-panel'));
+        }
+    }
+
+    .#{$prefix}-datepicker-datetime-panel {
+        display: flex;
+        @if map.has-key($mixins, 'hook-datepicker-datetime-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-datetime-panel'));
+        }
+    }
+
+    .#{$prefix}-datepicker-time-panel,
+    .#{$prefix}-datepicker-date-panel,
+    .#{$prefix}-datepicker-month-panel,
+    .#{$prefix}-datepicker-quarter-panel,
+    .#{$prefix}-datepicker-decade-panel,
+    .#{$prefix}-datepicker-week-panel,
+    .#{$prefix}-datepicker-year-panel {
+        display: flex;
+        flex-direction: column;
+        transition: opacity var(--transition-duration);
+        width: calc(var(--datepicker-cell-width) * 7 + calc(var(--datepicker-body-padding-horizontal) * 2));
+    }
+
+    .#{$prefix}-datepicker-time-panel {
+        min-width: auto;
+        width: auto;
+        @if map.has-key($mixins, 'hook-datepicker-time-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-time-panel'));
+        }
+    }
+
+    .#{$prefix}-datepicker-time-panel:not(:first-child) {
+        border-inline-start: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+    }
+
+    .#{$prefix}-datepicker-date-panel {
+        @if map.has-key($mixins, 'hook-datepicker-date-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-date-panel'));
+        }
+    }
+
+    .#{$prefix}-datepicker-month-panel {
+        @if map.has-key($mixins, 'hook-datepicker-month-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-month-panel'));
+        }
+    }
+
+    .#{$prefix}-datepicker-quarter-panel {
+        @if map.has-key($mixins, 'hook-datepicker-quarter-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-quarter-panel'));
+        }
+    }
+
+    .#{$prefix}-datepicker-decade-panel {
+        @if map.has-key($mixins, 'hook-datepicker-decade-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-decade-panel'));
+        }
+    }
+
+    .#{$prefix}-datepicker-week-panel {
+        @if map.has-key($mixins, 'hook-datepicker-week-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-week-panel'));
+        }
+    }
+
+    .#{$prefix}-datepicker-year-panel {
+        @if map.has-key($mixins, 'hook-datepicker-year-panel') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-year-panel'));
+        }
+    }
+
+    /* Header */
+    .#{$prefix}-datepicker-header {
+        align-items: center;
+        border-bottom: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+        color: var(--global-color);
+        display: flex;
+        padding-left: var(--datepicker-header-padding-horizontal);
+        padding-right: var(--datepicker-header-padding-horizontal);
+        @if map.has-key($mixins, 'hook-datepicker-header') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-header'));
+        }
+    }
+
+    .#{$prefix}-datepicker-header-view {
+        display: inline-flex;
+        flex: auto;
+        font-size: var(--datepicker-header-font-size);
+        font-weight: var(--datepicker-header-font-weight);
+        justify-content: center;
+        line-height: var(--datepicker-header-height);
+        @if map.has-key($mixins, 'hook-datepicker-header-view') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-header-view'));
+        }
+    }
+
+    /* Body and content */
+    .#{$prefix}-datepicker-body {
+        padding: var(--datepicker-body-padding-vertical) var(--datepicker-body-padding-horizontal);
+        @if map.has-key($mixins, 'hook-datepicker-body') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-body'));
+        }
+    }
+
+    .#{$prefix}-datepicker-content {
+        border-collapse: collapse;
+        table-layout: fixed;
+        text-align: center;
+        width: 100%;
+        @if map.has-key($mixins, 'hook-datepicker-content') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-content'));
+        }
+    }
+
+    // Elements
+    .#{$prefix}-datepicker-header button {
+        align-items: center;
+        appearance: none;
+        background: transparent;
+        border: none;
+        border-radius: 0;
+        color: var(--datepicker-header-button-color);
+        cursor: pointer;
+        display: inline-flex;
+        flex: none;
+        font-size: var(--datepicker-header-button-font-size);
+        font-weight: var(--datepicker-header-button-font-weight);
+        height: var(--datepicker-header-button-line-height);
+        justify-content: center;
+        line-height: var(--datepicker-header-button-line-height);
+        min-width: 1.6em;
+        padding: 0 var(--datepicker-header-button-padding-horizontal);
+        text-align: center;
+        transition: color var(--transition-medium-fast-duration);
+    }
+
+    .#{$prefix}-datepicker-header-view button {
+        color: inherit;
+    }
+
+    .#{$prefix}-datepicker-header-view button:hover {
+        color: var(--datepicker-header-view-button-hover-color);
+    }
+
+    .#{$prefix}-datepicker-header > button:hover {
+        color: var(--datepicker-header-button-hover-color);
+    }
+
+    .#{$prefix}-datepicker-prev-icon,
+    .#{$prefix}-datepicker-next-icon,
+    .#{$prefix}-datepicker-super-prev-icon,
+    .#{$prefix}-datepicker-super-next-icon {
+        color: inherit;
+        display: block;
+        height: 7px;
+        position: relative;
+        width: 7px;
+    }
+
+    .#{$prefix}-datepicker-next-icon,
+    .#{$prefix}-datepicker-super-next-icon {
+        transform: rotate(135deg);
+    }
+
+    .#{$prefix}-datepicker-prev-icon,
+    .#{$prefix}-datepicker-super-prev-icon {
+        transform: rotate(-45deg);
+    }
+
+    .#{$prefix}-datepicker-prev-icon::before,
+    .#{$prefix}-datepicker-next-icon::before,
+    .#{$prefix}-datepicker-super-prev-icon::before,
+    .#{$prefix}-datepicker-super-next-icon::before {
+        border: 0 solid currentColor;
+        border-block-width: 1.5px 0;
+        border-inline-width: 1.5px 0;
+        content: '';
+        height: 7px;
+        inset-inline-start: 0;
+        position: absolute;
+        top: 0;
+        width: 7px;
+    }
+
+    .#{$prefix}-datepicker-super-prev-icon::after,
+    .#{$prefix}-datepicker-super-next-icon::after {
+        border: 0 solid currentColor;
+        border-block-width: 1.5px 0;
+        border-inline-width: 1.5px 0;
+        content: '';
+        display: inline-block;
+        height: 7px;
+        inset-inline-start: 4px;
+        position: absolute;
+        top: 4px;
+        width: 7px;
+    }
+
+    .#{$prefix}-datepicker-content th {
+        box-sizing: border-box;
+        height: var(--datepicker-cell-height);
+        padding: 0;
+    }
+
+    /* Footer */
+    .#{$prefix}-datepicker-footer {
+        border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+        padding: var(--datepicker-footer-padding-vertical) var(--datepicker-footer-padding-horizontal);
+        @if map.has-key($mixins, 'hook-datepicker-footer') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-footer'));
+        }
+    }
+
+    .#{$prefix}-datepicker-ranges {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        list-style: none;
+        margin-block: 0;
+        overflow: hidden;
+        padding-inline: var(--datepicker-footer-ranges-padding-vertical) var(--datepicker-footer-ranges-padding-horizontal);
+        text-align: start;
+        @if map.has-key($mixins, 'hook-datepicker-ranges') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-ranges'));
+        }
+    }
+
+    .#{$prefix}-datepicker-ranges li {
+        display: inline-block;
+    }
+
+    /* Calendar
+     ========================================================================== */
+
+    .#{$prefix}-datepicker-cell {
+        color: var(--datepicker-cell-disabled-color);
+        cursor: pointer;
+        font-weight: normal;
+        min-width: var(--datepicker-cell-height);
+        padding: var(--datepicker-cell-padding) calc(var(--datepicker-cell-padding) / 2);
+        position: relative;
+        transition: background var(--transition-medium-fast-duration);
+        @if map.has-key($mixins, 'hook-datepicker-cell') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-cell'));
+        }
+    }
+
+    .#{$prefix}-datepicker-cell::before {
+        content: '';
+        height: var(--datepicker-cell-height);
+        inset-inline: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+    }
+
+    .#{$prefix}-datepicker-cell-in-view {
+        color: var(--datepicker-cell-color);
+    }
+
+    .#{$prefix}-datepicker-cell-inner {
+        border-radius: var(--datepicker-cell-border-radius);
+        display: inline-block;
+        height: var(--datepicker-cell-height);
+        line-height: var(--datepicker-cell-height);
+        min-width: var(--datepicker-cell-height);
+        position: relative;
+        z-index: 2;
+        @if map.has-key($mixins, 'hook-datepicker-cell-inner') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-cell-inner'));
+        }
+    }
+
+    /* Hover cell state */
+    .#{$prefix}-datepicker-cell:hover:not(.#{$prefix}-datepicker-cell-in-view, .#{$prefix}-datepicker-cell-disabled) .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-cell:hover:not(
+        .#{$prefix}-datepicker-cell-selected,
+        .#{$prefix}-datepicker-cell-range-start,
+        .#{$prefix}-datepicker-cell-range-end,
+        .#{$prefix}-datepicker-cell-disabled
+    ) .#{$prefix}-datepicker-cell-inner {
+        background-color: var(--datepicker-cell-hover-background);
+    }
+
+    .#{$prefix}-datepicker-cell-in-view.#{$prefix}-datepicker-cell-selected:not(.#{$prefix}-datepicker-cell-disabled) .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-cell-in-view.#{$prefix}-datepicker-cell-range-start:not(.#{$prefix}-datepicker-cell-disabled) .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-cell-in-view.#{$prefix}-datepicker-cell-range-end:not(.#{$prefix}-datepicker-cell-disabled) .#{$prefix}-datepicker-cell-inner {
+        background-color: var(--datepicker-cell-active-background);
+        color: var(--datepicker-cell-active-color);
+    }
+
+    /* Disabled cell state */
+    .#{$prefix}-datepicker-cell-disabled:not(.#{$prefix}-datepicker-cell-selected) {
+        color: var(--datepicker-cell-disabled-color);
+        cursor: not-allowed;
+    }
+
+    .#{$prefix}-datepicker-cell-disabled::before {
+        background: var(--datepicker-cell-disabled-background);
+    }
+
+    .#{$prefix}-datepicker-cell-disabled .#{$prefix}-datepicker-cell-inner {
+        background: none;
+    }
+
+    /* Today */
+    .#{$prefix}-datepicker-cell-in-view.#{$prefix}-datepicker-cell-today .#{$prefix}-datepicker-cell-inner::before {
+        border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+        border-radius: var(--datepicker-cell-border-radius);
+        bottom: 0;
+        content: '';
+        inset-inline: 0;
+        position: absolute;
+        top: 0;
+        z-index: 1;
+    }
+
+    .#{$prefix}-datepicker-cell-disabled.#{$prefix}-datepicker-cell-today .#{$prefix}-datepicker-cell-inner::before {
+        border-color: var(--datepicker-cell-disabled-border);
+    }
+
+    .#{$prefix}-datepicker-week-panel-row-range-start td.#{$prefix}-datepicker-cell .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-week-panel-row-range-end td.#{$prefix}-datepicker-cell .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-week-panel-row-hover td.#{$prefix}-datepicker-cell .#{$prefix}-datepicker-cell-inner {
+        color: var(--datepicker-cell-week-hover-color);
+    }
+
+    .#{$prefix}-datepicker-week-panel-row-range-start td.#{$prefix}-datepicker-cell::before,
+    .#{$prefix}-datepicker-week-panel-row-range-end td.#{$prefix}-datepicker-cell::before,
+    .#{$prefix}-datepicker-week-panel-row-hover td.#{$prefix}-datepicker-cell::before {
+        background-color: var(--datepicker-cell-week-hover-background);
+    }
+
+    .#{$prefix}-datepicker-week-panel-row-selected td.#{$prefix}-datepicker-cell .#{$prefix}-datepicker-cell-inner {
+        color: var(--datepicker-cell-week-active-color);
+    }
+
+    .#{$prefix}-datepicker-week-panel-row-selected td.#{$prefix}-datepicker-cell::before {
+        background-color: var(--datepicker-cell-week-active-background);
+    }
+
+    .#{$prefix}-datepicker-week-panel-row td:first-child::before {
+        border-bottom-left-radius: var(--datepicker-cell-border-radius);
+        border-top-left-radius: var(--datepicker-cell-border-radius);
+    }
+
+    .#{$prefix}-datepicker-week-panel-row td:last-child::before {
+        border-bottom-right-radius: var(--datepicker-cell-border-radius);
+        border-top-right-radius: var(--datepicker-cell-border-radius);
+    }
+
+    .#{$prefix}-datepicker-year-panel .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-quarter-panel .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-month-panel .#{$prefix}-datepicker-cell-inner {
+        width: calc(var(--datepicker-cell-width) * 1.5);
+    }
+
+    .#{$prefix}-datepicker-decade-panel .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-year-panel .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-quarter-panel .#{$prefix}-datepicker-cell-inner,
+    .#{$prefix}-datepicker-month-panel .#{$prefix}-datepicker-cell-inner {
+        padding: 0 calc(var(--datepicker-cell-padding) * 2);
+    }
+
+
+    /* Time panel */
+    .#{$prefix}-datepicker-time-panel .#{$prefix}-datepicker-content {
+        display: flex;
+        flex: auto;
+        height: var(--datepicker-time-column-height);
+    }
+
+    .#{$prefix}-datepicker-time-panel-column {
+        flex: 1 0 auto;
+        margin: var(--global-xsmall-margin) 0;
+        overflow: hidden;
+        padding: 0;
+        scrollbar-color: var(--global-scroll-background, var(--global-muted-background, rgba(#000, 0.15))) transparent;
+        scrollbar-width: thin;
+        text-align: start;
+        transition: background var(--transition-medium-fast-duration);
+        width: var(--datepicker-time-column-width);
+        @if map.has-key($mixins, 'hook-datepicker-time-panel-column') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-time-panel-column'));
+        }
+    }
+
+    .#{$prefix}-datepicker-time-panel-column:hover {
+        overflow-y: auto;
+    }
+
+    .#{$prefix}-datepicker-time-panel-column ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+
+    /* Time
+     ========================================================================== */
+
+    .#{$prefix}-datepicker-time-panel-column .#{$prefix}-datepicker-time-panel-cell {
+        margin-inline: var(--global-xsmall-margin);
+    }
+
+    .#{$prefix}-datepicker-time-panel-column .#{$prefix}-datepicker-time-panel-cell-inner {
+        border-radius: var(--global-small-border-radius);
+        color: var(--datepicker-cell-color);
+        cursor: pointer;
+        display: block;
+        height: var(--datepicker-time-cell-height);
+        line-height: var(--datepicker-time-cell-height);
+        margin: 0;
+        padding-block: 0;
+        padding-inline: calc((var(--datepicker-time-column-width) - var(--datepicker-time-cell-height)) / 2) 0;
+        transition: background var(--transition-medium-fast-duration);
+        width: calc(var(--datepicker-time-column-width) - var(--global-xsmall-margin) * 2);
+    }
+
+    .#{$prefix}-datepicker-time-panel-cell-inner:hover {
+        background-color: var(--datepicker-cell-hover-background);
+    }
+
+    .#{$prefix}-datepicker-time-panel-cell-selected .#{$prefix}-datepicker-time-panel-cell-inner {
+        background-color: var(--datepicker-cell-active-background);
+        color: var(--datepicker-cell-active-color);
+    }
+
+    .#{$prefix}-datepicker-time-panel-cell-disabled:not(.#{$prefix}-datepicker-time-panel-cell-selected) .#{$prefix}-datepicker-time-panel-cell-inner {
+        color: var(--datepicker-cell-disabled-color);
+        cursor: not-allowed;
+    }
+
+
+    /* Icons
+     ========================================================================== */
+
+    .#{$prefix}-datepicker .#{$prefix}-datepicker-suffix {
+        --icon-size: 1em;
+        align-self: center;
+        color: var(--datepicker-suffix-color);
+        display: flex;
+        flex: none;
+        font-size: 1em;
+        line-height: 0;
+        margin-inline-start: calc(var(--datepicker-suffix-padding-horizontal) / 2);
+        pointer-events: none;
+        transition: opacity var(--transition-medium-fast-duration),
+        color var(--transition-medium-fast-duration);
+    }
+
+    .#{$prefix}-datepicker:hover .#{$prefix}-datepicker-suffix:not(:last-child) {
+        opacity: 0;
+    }
+
+    .#{$prefix}-datepicker .#{$prefix}-datepicker-clear {
+        --icon-size: 1em;
+        color: var(--datepicker-clear-color);
+        cursor: pointer;
+        font-size: 1em;
+        inset-inline-end: 0;
+        line-height: 0;
+        opacity: 0;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: opacity var(--transition-medium-fast-duration), color var(--transition-medium-fast-duration);
+    }
+
+    .#{$prefix}-datepicker:hover .#{$prefix}-datepicker-clear {
+        opacity: 1;
+    }
+
+    /* Dropdown
+     ========================================================================== */
+
+    .#{$prefix}-datepicker-dropdown {
+        background-color: var(--datepicker-dropdown-background);
+        border: var(--datepicker-dropdown-border-width) var(--datepicker-dropdown-border-style) var(--datepicker-dropdown-border);
+        font-variant: initial;
+        left: -9999px;
+        max-width: fit-content;
+        outline: none;
+        overflow: hidden;
+        padding: var(--datepicker-gutter);
+        position: absolute;
+        top: -9999px;
+        z-index: var(--datepicker-dropdown-z-index);
+        @if map.has-key($mixins, 'hook-datepicker-dropdown') {
+            @include meta.apply(map.get($mixins, 'hook-datepicker-dropdown'));
+        }
+    }
+
+    .#{$prefix}-datepicker-dropdown-placement-bottom-left.#{$prefix}-slide-up-enter.#{$prefix}-slide-up-enter-active,
+    .#{$prefix}-datepicker-dropdown-placement-bottom-left.#{$prefix}-slide-up-appear.#{$prefix}-slide-up-appear-active {
+        animation-name: uk-slide-up-in;
+    }
+
+    .#{$prefix}-datepicker-dropdown-placement-top-left.#{$prefix}-slide-up-enter.#{$prefix}-slide-up-enter-active,
+    .#{$prefix}-datepicker-dropdown-placement-top-left.#{$prefix}-slide-up-appear.#{$prefix}-slide-up-appear-active {
+        animation-name: uk-slide-down-in;
+    }
+
+    .#{$prefix}-datepicker-dropdown-placement-bottom-left .#{$prefix}-slide-up-leave.#{$prefix}-slide-up-leave-active {
+        animation-name: uk-slide-up-out;
+    }
+
+    .#{$prefix}-datepicker-dropdown-placement-top-left.#{$prefix}-slide-up-leave.#{$prefix}-slide-up-leave-active {
+        animation-name: uk-slide-down-out;
+    }
+
+    .#{$prefix}-datepicker-dropdown-hidden {
+        display: none;
+    }
+
+    @content;
+}
+
+@mixin datepicker-tokens {
+    --datepicker-border: var(--control-border);
+    --datepicker-border-style: var(--control-border-style);
+    --datepicker-border-width: var(--control-border-width);
+    --datepicker-gutter: var(--global-small-gutter);
+    --datepicker-height: #{$datepicker-height};
+    --datepicker-small-height: #{$datepicker-small-height};
+    --datepicker-medium-height: #{$datepicker-medium-height};
+    --datepicker-large-height: #{$datepicker-large-height};
+    --datepicker-success-border: var(--control-success-border);
+    --datepicker-success-color: var(--control-success-color);
+    --datepicker-warning-border: var(--control-warning-border);
+    --datepicker-warning-color: var(--control-warning-color);
+    --datepicker-danger-border: var(--control-danger-border);
+    --datepicker-danger-color: var(--control-danger-color);
+    --datepicker-blank-border-style: var(--control-blank-border-style);
+    --datepicker-blank-focus-border: var(--control-blank-focus-border);
+    --datepicker-header-padding-horizontal: var(--global-small-gutter);
+    --datepicker-header-font-size: var(--global-font-size);
+    --datepicker-header-font-weight: var(--global-bold-font-weight);
+    --datepicker-header-height: var(--global-control-large-height);
+    --datepicker-body-padding-horizontal: var(--global-gutter);
+    --datepicker-body-padding-vertical: var(--global-small-gutter);
+    --datepicker-header-button-color: var(--global-muted-color);
+    --datepicker-header-button-font-size: var(--global-font-size);
+    --datepicker-header-button-font-weight: var(--global-bold-font-weight);
+    --datepicker-header-button-line-height: var(--global-control-large-height);
+    --datepicker-header-button-padding-horizontal: var(--global-small-gutter);
+    --datepicker-header-button-hover-color: var(--global-color);
+    --datepicker-header-view-button-hover-color: var(--global-primary-color);
+    --datepicker-footer-padding-horizontal: var(--global-small-gutter);
+    --datepicker-footer-padding-vertical: var(--global-small-gutter);
+    --datepicker-footer-ranges-padding-horizontal: var(--global-small-gutter);
+    --datepicker-footer-ranges-padding-vertical: var(--global-small-gutter);
+    --datepicker-cell-border-radius: var(--global-small-border-radius);
+    --datepicker-cell-height: var(--global-control-height);
+    --datepicker-cell-width: #{$datepicker-cell-width};
+    --datepicker-cell-padding: var(--global-xsmall-gutter);
+    --datepicker-cell-color: var(--global-color);
+    --datepicker-cell-hover-background: var(--global-secondary-background);
+    --datepicker-cell-active-background: var(--global-primary-background);
+    --datepicker-cell-active-color: var(--global-inverse-color);
+    --datepicker-cell-disabled-background: var(--global-muted-background);
+    --datepicker-cell-disabled-border: var(--global-muted-border);
+    --datepicker-cell-disabled-color: var(--global-muted-color);
+    --datepicker-cell-week-hover-background: var(--global-secondary-background);
+    --datepicker-cell-week-hover-color: var(--global-color);
+    --datepicker-cell-week-active-background: var(--global-primary-background);
+    --datepicker-cell-week-active-color: var(--global-inverse-color);
+    --datepicker-time-column-height: #{$datepicker-time-column-height};
+    --datepicker-time-column-width: #{$datepicker-time-column-width};
+    --datepicker-time-cell-height: #{$datepicker-time-cell-height};
+    --datepicker-suffix-color: var(--global-muted-color);
+    --datepicker-suffix-padding-horizontal: var(--global-small-gutter);
+    --datepicker-clear-color: var(--global-color);
+    --datepicker-dropdown-background: var(--global-muted-background);
+    --datepicker-dropdown-border: var(--global-border);
+    --datepicker-dropdown-border-style: var(--global-border-style);
+    --datepicker-dropdown-border-width: var(--global-border-width);
+    --datepicker-dropdown-z-index: #{$datepicker-dropdown-z-index};
+
+    @content;
+}