@use "sass:map";
@use "../../mixins/index.scss" as *;
@use "../../functions/index.scss" as *;
@use "../../color-system/_constants.scss" as *;
@use "../../_variables.scss" as *;
@use "./_variables.scss" as *;
@use "../icons/_variables.scss" as *;
@use "../../z-index/index.scss" as *;
@use "../../motion/index.scss" as *;
@use "../../border-radii/index.scss" as *;

@mixin kendo-input--layout-base() {

    // Generic input
    .k-input,
    .k-picker {
        margin: 0;
        padding: 0;
        width: $kendo-input-default-width;
        min-width: 0;
        box-sizing: border-box;
        border-width: $kendo-input-border-width;
        border-style: solid;
        outline: 0;
        font-family: $kendo-input-font-family;
        font-weight: normal;
        text-align: start;
        box-shadow: none;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: stretch;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-appearance: none;

        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);

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

        > .k-input,
        > .k-picker {
            border-width: 0 !important; // stylelint-disable-line declaration-no-important
            color: inherit;
            background: none;
            font: inherit;
            outline: 0;
            box-shadow: none !important; // stylelint-disable-line declaration-no-important
        }

        // fix for Safari
        & > * {
            margin: 0;
        }

        &::placeholder {
            color: $kendo-input-placeholder-text;
            opacity: $kendo-input-placeholder-opacity;
            user-select: none;
        }
    }

    .k-input {

        // Roundness
        @each $roundness in $kendo-input-roundness {
            #{k-when-default($kendo-input-default-roundness, $roundness)}
            &.k-rounded-#{$roundness} {
                border-radius: k-border-radius($roundness);
            }
        }
        // Null by default, overrides default border-radius
        border-radius: $kendo-input-border-radius;

        // Sizing
        @each $size, $size-props in $kendo-input-sizes {
            $_padding-x: map.get( $size-props, padding-x );
            $_padding-y: map.get( $size-props, padding-y );
            $_font-size: map.get( $size-props, font-size );
            $_line-height: map.get( $size-props, line-height );
            $_button-padding-x: map.get( $size-props, button-padding-x );
            $_button-padding-y: map.get( $size-props, button-padding-y );

            #{k-when-default($kendo-input-default-size, $size)}
            &.k-input-#{$size} {
                font-size: $_font-size;
                line-height: $_line-height;

                .k-input-values {
                    padding: calc( #{$_padding-y} /2 );
                    gap: calc( #{$_padding-y} / 2 );
                }
                .k-input-values > .k-searchbar,
                .k-input-values > .k-input-inner {
                    margin: calc( calc( #{$_padding-y} / 2 ) * -1 );
                }

                .k-input-inner {
                    padding-block: $_padding-y;
                    padding-inline: $_padding-x;
                }

                .k-input-button,
                .k-spinner-increase,
                .k-spinner-decrease {
                    padding-block: $_button-padding-y;
                    padding-inline: $_button-padding-x;
                }

                .k-input-icon,
                .k-input-validation-icon,
                .k-input-loading-icon,
                .k-clear-value,
                .k-input-prefix > .k-icon,
                .k-input-prefix > .k-icon-wrapper-host .k-icon,
                .k-input-prefix > .k-input-prefix-text,
                .k-input-suffix > .k-icon,
                .k-input-suffix > .k-icon-wrapper-host .k-icon,
                .k-input-suffix > .k-input-suffix-text {
                    padding-block: $_padding-y;
                    padding-inline: $_padding-y;
                    box-sizing: content-box;
                }

                .k-input-separator {
                    &-horizontal {
                        margin-inline: $_padding-y;
                    }

                    &-vertical {
                        margin-block: $_padding-y;
                    }
                }
            }
        }

        font-size: $kendo-input-font-size;
        line-height: $kendo-input-line-height;

        // Fill mode
        #{k-when-default($kendo-input-default-fill-mode, "flat")}
        &.k-input-flat {
            @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
            border-width: $kendo-input-border-width 0;
            border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
            background-image: none !important; // stylelint-disable-line declaration-no-important
        }
    }

    .k-picker {

        // Roundness
        @each $roundness in $kendo-picker-roundness {
            #{k-when-default($kendo-picker-default-roundness, $roundness)}
            &.k-rounded-#{$roundness} {
                border-radius: k-border-radius($roundness);
            }
        }
        // Null by default, overrides default border-radius
        border-radius: $kendo-input-border-radius;

        // Sizing
        @each $size, $size-props in $kendo-input-sizes {
            $_padding-x: map.get( $size-props, padding-x );
            $_padding-y: map.get( $size-props, padding-y );
            $_font-size: map.get( $size-props, font-size );
            $_line-height: map.get( $size-props, line-height );

            #{k-when-default($kendo-picker-default-size, $size)}
            &.k-picker-#{$size} {
                font-size: $_font-size;
                line-height: $_line-height;

                .k-input-inner {
                    padding-block: $_padding-y;
                    padding-inline: $_padding-x;
                }

                .k-input-icon,
                .k-input-validation-icon,
                .k-input-loading-icon,
                .k-clear-value,
                .k-input-prefix > .k-icon,
                .k-input-prefix > .k-icon-wrapper-host .k-icon,
                .k-input-prefix > .k-input-prefix-text,
                .k-input-suffix > .k-icon,
                .k-input-suffix > .k-icon-wrapper-host .k-icon,
                .k-input-suffix > .k-input-suffix-text {
                    padding-block: $_padding-y;
                    padding-inline: $_padding-y;
                    box-sizing: content-box;
                }

                &.k-icon-picker > .k-input-inner {
                    width: calc( ( #{ $_line-height} * 1em ) );
                    height: calc( ( #{ $_line-height} * 1em ) );
                    padding: $_padding-y;
                    box-sizing: content-box;
                }
            }

            select.k-picker-#{$size} {
                padding-block: $_padding-y;
                padding-inline: $_padding-x;
            }
        }

        font-size: $kendo-input-font-size;
        line-height: $kendo-input-line-height;

        // Fill mode
        #{k-when-default($kendo-picker-default-fill-mode, "flat")}
        &.k-picker-flat {
            @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
            border-width: $kendo-input-border-width 0;
            border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
            background-image: none !important; // stylelint-disable-line declaration-no-important
        }
    }

    // Input and Textarea
    input.k-input,
    textarea.k-textarea {
        padding-block: $kendo-input-md-padding-y;
        padding-inline: $kendo-input-md-padding-x;
    }

    textarea.k-textarea {
        overflow: auto;
    }


    // Picker
    .k-picker {
        cursor: pointer;
    }
    select.k-picker {
        padding-block: $kendo-input-md-padding-y;
        padding-inline: $kendo-input-md-padding-x;
        appearance: auto;
        align-items: center;
    }


    // Input inner
    .k-input-inner {
        padding-block: $kendo-input-md-padding-y;
        padding-inline: $kendo-input-md-padding-x;
        width: 100%;
        border: 0;
        outline: 0;
        color: inherit;
        background: none;
        font: inherit;
        flex: 1;
        position: relative;
        z-index: k-z-index("base", 1);
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-appearance: none;

        // Placeholder text
        &::placeholder {
            color: $kendo-input-placeholder-text;
            opacity: $kendo-input-placeholder-opacity;
            user-select: none;
        }

        // Invalid
        &:invalid {
            box-shadow: none;
        }
    }
    span.k-input-inner {
        white-space: nowrap;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
    textarea.k-input-inner {
        margin: 0;
    }


    // Input value
    .k-input-value-icon {
        flex: none;
    }
    .k-input-value-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;

        &::before {
            content: "";
            width: 0;
            height: 1lh;
            overflow: hidden;
            flex: none;
            display: inline-block;
            vertical-align: top;
        }
    }
    // Input multiple values
    .k-input-values {
        min-width: 0px;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        cursor: text;
    }
    .k-input-values .k-chip-list {
        display: contents;
    }


    // Icon picker
    .k-icon-picker {
        > .k-input-inner {
            padding: $kendo-input-md-padding-y;
            // TODO we need better way
            // width: $kendo-input-inner-calc-height;
            // height: $kendo-input-inner-calc-height;
            justify-content: center;
        }
    }


    // Input prefix and suffix
    .k-input-prefix,
    .k-input-suffix {
        border-color: inherit;
        display: flex;
        align-items: center;
        flex: none;

        > * {
            flex-shrink: 0;
            border: none;
        }

        &-vertical {
            flex-flow: column wrap;
        }

        &-horizontal {
            flex-flow: row wrap;
        }
    }


    // Input separator
    .k-input-separator {
        margin: 0;
        border-style: solid;
        border-color: inherit;
        border-width: 0 0 0 1px;
        height: $kendo-icon-size;
        align-self: center;

        &-horizontal {
            height: auto;
            margin-inline: $kendo-input-md-padding-y;
            align-self: stretch;
            border-width: 1px 0 0;
        }

        &-vertical {
            height: auto;
            margin-block: $kendo-input-md-padding-y;
            align-self: stretch;
            border-width: 0 0 0 1px;
        }
    }

    // Input group
    .k-input-group {
        margin: 0;
        padding: 0;
        border-width: 0;
        box-sizing: border-box;
        list-style: none;
        outline: 0;
        display: inline-flex;
        flex-flow: row nowrap;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        > .k-input + .k-input {
            margin-inline-start: if( $kendo-input-border-width == 0, null, -$kendo-input-border-width );
        }

        > .k-input:hover,
        > .k-input.k-hover,
        > .k-input:focus,
        > .k-input:focus-within,
        > .k-input.k-focus,
        > .k-input:active,
        > .k-input.k-active,
        > .k-input.k-selected {
            z-index: k-z-index("base", 2);
        }

        .k-input:not(:first-child):not(:last-child) {
            border-start-end-radius: 0;
            border-end-end-radius: 0;
            border-start-start-radius: 0;
            border-end-start-radius: 0;
        }
        > .k-input:first-child:not(:only-child) {
            border-start-end-radius: 0;
            border-end-end-radius: 0;
        }
        > .k-input:last-child:not(:only-child) {
            border-start-start-radius: 0;
            border-end-start-radius: 0;
        }

        &:disabled,
        &[disabled],
        &.k-disabled {
            opacity: 1;
            filter: none;
        }
    }

    // Input with icon styles
    .k-input-icon,
    .k-input-validation-icon,
    .k-input-loading-icon {
        flex: none;
        align-self: center;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        box-sizing: content-box;
    }

    .k-input-loading-icon {
        width: 1em;
        height: 1em;
        font-size: $kendo-icon-size;
    }

    // Input with SVG icon
    .k-input-icon,
    .k-input-validation-icon,
    .k-input-loading-icon {
        &.k-svg-icon > svg,
        &.k-icon-md > svg {
            width: $kendo-icon-size-md;
            height: $kendo-icon-size-md;
        }

        &.k-icon-xs > svg {
            width: $kendo-icon-size-xs;
            height: $kendo-icon-size-xs;
        }

        &.k-icon-sm > svg {
            width: $kendo-icon-size-sm;
            height: $kendo-icon-size-sm;
        }

        &.k-icon-lg > svg {
            width: $kendo-icon-size-lg;
            height: $kendo-icon-size-lg;
        }

        &.k-icon-xl > svg {
            width: $kendo-icon-size-xl;
            height: $kendo-icon-size-xl;
        }

        &.k-icon-xxl > svg {
            width: $kendo-icon-size-xxl;
            height: $kendo-icon-size-xxl;
        }

        &.k-icon-xxxl > svg {
            width: $kendo-icon-size-xxxl;
            height: $kendo-icon-size-xxxl;
        }
    }


    // Clear value
    .k-clear-value {
        outline: 0;
        color: $kendo-input-clear-value-text;
        flex: none;
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: $kendo-input-clear-value-opacity;
    }
    .k-clear-value:hover,
    .k-clear-value.k-hover {
        color: $kendo-input-clear-value-hover-text;
        opacity: $kendo-input-clear-value-hover-opacity;
    }
    .k-clear-value:focus-visible {
        outline: 1px dotted;
        outline-offset: -1px;
    }


    // Input button
    .k-input-button {
        width: if( $kendo-use-input-button-width, $kendo-input-button-width, auto );
        border-width: 0;
        border-inline-start-width: $kendo-input-button-border-width;
        border-radius: 0;
        flex: none;
        aspect-ratio: auto;
        box-shadow: none;

        > .k-button-icon {
            min-width: auto !important; // stylelint-disable-line declaration-no-important
            // min-height: auto !important; // stylelint-disable-line declaration-no-important
        }

        &:focus {
            box-shadow: none;
        }
    }
    .k-picker .k-input-button {
        color: inherit;
        background: none;
        border-color: transparent;
    }


    // Input spinner
    .k-input-spinner {
        width: if( $kendo-use-input-spinner-width, $kendo-input-spinner-width, auto );
        flex: none;
        display: flex;
        flex-flow: column nowrap;

        .k-spinner-increase,
        .k-spinner-decrease {
            border-width: 0;
            border-inline-start-width: $kendo-input-button-border-width;
            border-radius: 0;
            flex: 1 1 50%;
            box-shadow: none;
            position: relative;
            aspect-ratio: auto;

            .k-button-icon {
                margin-block: -1em;
                margin-inline: 0;
                min-width: auto !important; // stylelint-disable-line declaration-no-important
                min-height: auto !important; // stylelint-disable-line declaration-no-important
            }
        }
        .k-spinner-increase .k-icon {
            inset-block-end: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
        }
        .k-spinner-decrease .k-icon {
            inset-block-start: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
        }
    }


    // Searchbar
    .k-searchbar {
        flex: 1 1 auto;
        display: flex;
        flex-flow: row nowrap;
    }


    // Legacy wrappers
    .k-picker-wrap,
    .k-dropdown-wrap,
    .k-dateinput-wrap,
    .k-multiselect-wrap,
    .k-numeric-wrap {
        width: 100%;
        border-width: 0;
        border-color: inherit;
        box-sizing: border-box;
        flex: 1 1 auto;
        display: flex;
        flex-flow: row nowrap;
        overflow: hidden;
        position: relative;
    }

    // Angular specific
    .k-input > kendo-popup,
    .k-picker > kendo-popup {
        position: fixed;
    }




    // This is needed for the textbox container to capture browser autofill
    @keyframes autoFillStart { // stylelint-disable-line
        from {}
        to {}
    }
    @keyframes autoFillEnd { // stylelint-disable-line
        from {}
        to {}
    }

    // Generic class for autofill animations
    .k-autofill:-webkit-autofill {
        animation-name: autoFillStart;
    }
    .k-autofill:not(:-webkit-autofill) {
        animation-name: autoFillEnd;
    }


    .k-input:-webkit-autofill {
        animation-name: autoFillStart;
    }
    .k-input:not(:-webkit-autofill) {
        animation-name: autoFillEnd;
    }

}