@use '../../datepicker/datepicker-theme' as *;
@use '../filter-bar-theme' as *;

@use '../../datepicker/datepicker-tokens' as *;

.kbq-pipe-date__popover {
    & .kbq-popover__container {
        max-height: unset;
    }

    & .kbq-popover__content {
        padding: 0;
    }

    & .kbq-date-list {
        margin: var(--kbq-size-xxs) 0;

        & .kbq-list-option {
            margin-left: var(--kbq-size-xxs);
            margin-right: var(--kbq-size-xxs);

            & .kbq-list-text {
                display: flex;
                flex-direction: row;
            }

            & .kbq-icon {
                margin-left: var(--kbq-size-s);
                align-self: center;

                color: var(--kbq-icon-fade-contrast-color);
            }
        }
    }

    & .kbq-date-period {
        width: 320px;

        & .kbq-date-period__header {
            padding: var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s);

            & .kbq-button {
                width: 100%;
                justify-content: flex-start;
            }
        }

        & .kbq-divider {
            margin: var(--kbq-size-xxs) var(--kbq-size-l);
        }

        & .kbq-date-period__content {
            display: grid;
            grid-auto-columns: minmax(min-content, 1fr);
            grid-template-columns: min-content minmax(min-content, 1fr);

            padding: 0;

            gap: var(--kbq-size-s);

            & .kbq-form__label {
                padding-left: var(--kbq-size-l);
            }

            & .kbq-form__control {
                padding-right: var(--kbq-size-l);
            }

            & .kbq-date-period__date,
            & .kbq-date-period__time {
                width: auto;
            }

            & .kbq-form__row_with-time {
                display: flex;

                & .kbq-date-period__date {
                    width: 136px;

                    & .kbq-form-field__container {
                        border-top-right-radius: unset;
                        border-bottom-right-radius: unset;
                    }
                }

                & .kbq-date-period__time.kbq-form-field-type-timepicker {
                    flex: 1;
                    margin-left: -1px;
                    width: unset;

                    & .kbq-form-field__container {
                        border-top-left-radius: unset;
                        border-bottom-left-radius: unset;
                    }
                }
            }

            & .kbq-calendar {
                position: relative;
                grid-column: 2 span;
                padding: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);
                background-color: var(--kbq-background-bg-tertiary);

                &.kbq-calendar_hidden {
                    display: none;
                }
            }

            & .kbq-hint {
                grid-column: 2 span;

                padding-left: var(--kbq-size-m);
                padding-right: var(--kbq-size-m);
            }
        }

        & .kbq-date-period__footer {
            padding: var(--kbq-size-xxs);

            & .kbq-button {
                width: 100%;
                justify-content: flex-start;

                &:not(.kbq-disabled) .kbq-button_hot-key {
                    color: var(--kbq-foreground-contrast-secondary);
                }
            }
        }
    }
}

@include kbq-datepicker-theme();
@include kbq-datepicker-typography();