@use "sass:map";
@use "./variables.scss" as *;
@use "../../motion/index.scss" as *;
@use "../../functions/index.scss" as *;
@use "../action-buttons/_variables.scss" as *;

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

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

    // Datetime selector
    .k-datetime-selector {
        display: flex;
    }

    // Wrap
    .k-datetime-wrap {
        // TODO: remove width after .k-datetime-wrap-md class is applied by default.
        width: $kendo-datetime-width;
        overflow: hidden;

        .k-datetime-buttongroup {
            padding-block: $kendo-actions-padding-y;
            padding-inline: $kendo-actions-padding-x;
        }

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

    // Inner wrap
    .k-datetime-calendar-wrap,
    .k-datetime-time-wrap {
        text-align: center;
        // TODO: remove flex after .k-datetime-wrap-md class is applied by default.
        flex: 0 0 $kendo-datetime-width;
    }

    // Sizes
    .k-datetime-wrap {
        @each $size, $size-props in $kendo-datetime-sizes {
            $_width: map.get($size-props, width);

            #{k-when-default($kendo-datetime-default-size, $size)}
            &.k-datetime-wrap-#{$size} {
                width: $_width;

                .k-datetime-calendar-wrap,
                .k-datetime-time-wrap {
                    flex: 0 0 $_width;
                }
            }
        }
    }

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

    :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%);
    }
}