//
// Date Picker
// --------------------------------------------------

@datepicker-bg:             @popup-bg;
@datepicker-color:          @text-color;
@datepicker-border:         @popup-border;
@datepicker-selected-bg:    @brand-selection;
@datepicker-selected-color: #fff;
@datepicker-hover-bg:       @secondary-bg;
@datepicker-hover-text:     @emphasis-color;

@datepicker-today-text:     #fff;
@datepicker-today-bg:       @brand-secondary;

@import "datepicker.date.less";
@import "datepicker.time.less";

.pika-single {
    border: @datepicker-border !important;
    background: @datepicker-bg;
    color: @text-color;
    border-radius: 8px;

    font-size: 12px;
    margin-top: 5px;
    z-index: @zindex-datepicker;
    font-family: @font-family-sans-serif;
    width: 310px;

    &.is-bound {
        box-shadow: @box-shadow-z2;
    }

    abbr {
        border-bottom: none;
    }

    .pika-button {
        border-radius: 999px !important;
        text-align: center;
        width: 29px;
        height: 29px;
        margin: 3px;
        background: transparent;
        color: @datepicker-color;
    }

    .is-today .pika-button {
        background: @datepicker-today-bg;
        color: @datepicker-today-text;
        font-weight: bold;
    }

    .is-selected .pika-button {
        box-shadow: none;
        background: @datepicker-selected-bg;
        color: @datepicker-selected-color;
    }

    .pika-button:hover {
        color: @datepicker-hover-text !important;
        background: @datepicker-hover-bg !important;
    }

    .pika-label {
        font-weight: normal;
    }

    .pika-table th {
        text-transform: uppercase;
        font-weight: normal;
        line-height: 30px;
        font-size: @font-size-base - 3;
        color: @primary-color;
    }

    .pika-footer {
        .pika-label {
            font-size: @font-size-base - 3;
        }
    }
}

.clockpicker-popover {
    z-index: @zindex-datepicker;
    box-shadow: @box-shadow-z2;
    border-radius: 8px;
    border: @datepicker-border !important;
    background-color: @datepicker-bg;

    .popover-title {
        background-color: @datepicker-bg;
        font-size: 20px;
        font-weight: normal;
        border: none;
    }

    .popover-content {
        background-color: @tertiary-bg;
    }

    &.top {
        margin-top: -5px;
    }
    &.right {
        margin-left: 5px;
    }
    &.bottom {
        margin-top: 5px;
    }
    &.left {
        margin-left: -5px;
    }

    > .arrow {
        display: none;
    }
}

.clockpicker-plate {
    background-color: @datepicker-bg;
    border: @datepicker-border;
}

.clockpicker-tick {
    color: @datepicker-color;

    &.active,
    &:hover {
        background-color: @datepicker-hover-bg;
        color: @datepicker-hover-text;
    }
}

.clockpicker-canvas-bg {
    fill: @secondary-bg;
}
.clockpicker-canvas-bg-trans {
    fill: rgba(0, 149, 221, .25);
}

.clockpicker-hours .clockpicker-tick {
    font-size: 12px;

    &.tick-inner {
        font-size: 16px;
    }
}
.clockpicker-minutes .clockpicker-tick {
    font-size: 16px;
}

[data-bs-theme="dark"] {
    .pika-prev,
    .pika-next {
        filter: invert(100%);
    }
}