@use "./_variables.scss" as *;

@mixin kendo-floating-label--layout() {

    // Floating label
    .k-floating-label-container {
        padding-top: var( --kendo-floating-label-height, #{$kendo-floating-label-height} );
        box-sizing: border-box;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        flex-direction: column;
        justify-content: stretch;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        > .k-floating-label {
            max-width: var( --kendo-floating-label-max-width, #{$kendo-floating-label-max-width} );
            font-size: var( --kendo-floating-label-font-size, #{$kendo-floating-label-font-size} );
            font-weight: var( --kendo-floating-label-font-weight, #{$kendo-floating-label-font-weight} );
            line-height: var( --kendo-floating-label-line-height, #{$kendo-floating-label-line-height} );
            white-space: nowrap;
            text-overflow: ellipsis;
            position: absolute;
            top: var( --kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y} );
            left: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
            overflow: hidden;
            cursor: text;
            transform-origin: left center;
            transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), left var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
        }


        &.k-empty {
            > .k-floating-label {
                top: var( --kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y} );
                left: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
                transform: scale( var( --kendo-floating-label-scale, #{$kendo-floating-label-scale} ) );
                pointer-events: none;
            }
        }

        > .k-floating-label,
        &:focus-within > .k-floating-label,
        &.k-focus > .k-floating-label {
            top: var( --kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y} );
            left: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
            transform: scale( var( --kendo-floating-label-focus-scale, #{$kendo-floating-label-focus-scale} ) );
        }


        &.k-empty:not(.k-focus, :focus-within) ::placeholder {
            color: transparent;
        }

        &:disabled,
        &[disabled],
        &.k-disabled  {
            background: none;
        }
    }

    [dir="rtl"] .k-floating-label-container,
    .k-rtl .k-floating-label-container,
    .k-floating-label-container[dir="rtl"] {

        > .k-floating-label {
            transform-origin: right center;
            transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), right var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
        }

        &.k-empty {
            > .k-floating-label {
                left: auto;
                right: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
            }
        }

        > .k-floating-label,
        &:focus-within > .k-floating-label,
        &.k-focus > .k-floating-label {
            left: auto;
            right: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
        }
    }
}