@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "../action-buttons/_variables.scss" as *;

@mixin kendo-date-time-picker--layout() {

    // Datetime container
    .k-datetime-container {}

    // Datetime selector
    .k-datetime-selector {
        display: flex;
        transition: transform .2s;
    }

    // Wrap
    .k-datetime-wrap {
        width: var( --kendo-datetime-width, #{$kendo-datetime-width} );
        overflow: hidden;

        .k-datetime-buttongroup {
            padding-inline: var( --kendo-datetime-button-group-padding-x, #{$kendo-actions-padding-x} );
            padding-block: var( --kendo-datetime-button-group-padding-y, #{$kendo-actions-padding-y} ) 0;
        }

        .k-calendar,
        .k-timeselector {
            width: 100%;
            border-width: 0;
        }
    }

    // Inner wrap
    .k-datetime-calendar-wrap,
    .k-datetime-time-wrap {
        text-align: center;
        flex: 0 0 var( --kendo-datetime-width, #{$kendo-datetime-width} );
    }

    .k-datetime-time-wrap .k-time-header {
        flex-direction: column;
    }

    // Tabs
    .k-date-tab .k-datetime-selector {
        transform: translateX(0);
    }
    .k-time-tab .k-datetime-selector {
        transform: translateX(-100%);
    }

    :is(.k-rtl, [dir="rtl"]) .k-time-tab .k-datetime-selector,
    .k-time-tab .k-datetime-selector:is(.k-rtl, [dir="rtl"]) {
        transform: translateX(100%);
    }
}