.kbq-time-range {
    .kbq-time-range__trigger {
        display: block;
    }
}

.kbq-time-range__popover {
    .kbq-time-range__buttons {
        display: flex;
        flex-direction: row;
        gap: var(--kbq-size-l);
    }
}

.kbq-time-range__editor {
    display: block;

    .kbq-time-range-editor__container {
        width: 100%;
    }

    .kbq-time-range-editor__predefined {
        column-count: 2;

        .kbq-time-range-editor__predefined-option {
            display: block;
            margin-bottom: var(--kbq-size-s);
        }
    }

    .kbq-time-range-editor__range {
        display: flex;
        flex-direction: column;
        gap: var(--kbq-size-s);

        .kbq-time-range-editor__predefined {
            column-count: 2;

            .kbq-time-range-editor__predefined-option {
                display: block;
            }
        }

        .kbq-time-range-editor__date-time {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: var(--kbq-size-s);

            .kbq-time-range-editor__date-time-prefix {
                align-self: center;
                width: 57px;
            }
        }
    }
}

.kbq-time-range-title-as-form-field {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width));

    .kbq-time-range-title__placeholder {
        color: var(--kbq-foreground-contrast-tertiary);
    }
}