@use "sass:map";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "../icons/_variables.scss" as *;

@mixin kendo-input--layout() {

    // Generic input
    .k-input,
    .k-picker {
        margin: 0;
        padding: 0;
        width: var( --kendo-input-width, #{$kendo-input-width} );
        min-width: 0;
        box-sizing: border-box;
        border-width: var( --kendo-input-border-width, #{$kendo-input-border-width} );
        border-style: solid;
        outline: 0;
        font-family: var( --kendo-input-font-family, #{$kendo-input-font-family} );
        font-size: var( --INTERNAL--kendo-input-font-size, inherit );
        line-height: var( --INTERNAL--kendo-input-line-height, #{$kendo-line-height-md} );
        font-weight: var( --kendo-input-font-weight, #{$kendo-input-font-weight} );
        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;

        *,
        *::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;
        }

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

        &::placeholder {
            color: var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} );
            opacity: var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} );
            user-select: none;
        }
    }

    .k-input,
    .k-picker {

        &:focus,
        &.k-focus,
        &:focus-within {

            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                border-width: var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} );
                border-style: solid;
                border-radius: inherit;
                pointer-events: none;
                z-index: 1;
            }
        }
    }

    // Solid and flat Numeric Textbox
    .k-numerictextbox.k-input-solid,
    .k-numerictextbox.k-input-flat  {

        .k-spinner-increase,
        .k-spinner-decrease {
            border: none;
        }
    }

    // Input and Textarea
    .k-input {}
    input.k-input,
    textarea.k-textarea {
        padding-inline: var( --INTERNAL--kendo-input-padding-x, 0 );
        padding-block: var( --INTERNAL--kendo-input-padding-y, 0 );
    }
    textarea.k-textarea {
        overflow: auto;
    }


    // Picker
    .k-picker {
        cursor: pointer;
    }
    select.k-picker {
        padding-inline: var( --INTERNAL--kendo-input-padding-x, 0 );
        padding-block: var( --INTERNAL--kendo-input-padding-y,  0 );
        appearance: auto;
        align-items: center;
    }


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

        // Placeholder text
        &::placeholder {
            color: var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} );
            opacity: var( --kendo-input-placeholder-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;
    }
    .k-input-value-text::before {
        content: "\200b";
        width: 0px;
        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;
        gap: calc( var( --INTERNAL--kendo-input-padding-y, 0 ) / 2 );
        cursor: text;
    }
    .k-input-values .k-chip-list {
        display: contents;
    }


    // Icon picker
    .k-icon-picker {
        > .k-input-inner {
            padding: 0;
            box-sizing: content-box;
            justify-content: center;
        }

        .k-value-icon {
            border: 0;
            border-radius: 0;
        }
    }


    // 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: 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 {
        padding-inline: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
        padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
        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: var( --kendo-icon-size-md, 1rem );
    }

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

        &.k-icon-xs > svg {
            width: var( --kendo-icon-size-sm, 0.75rem );
            height: var( --kendo-icon-size-sm, 0.75rem )s;
        }

        &.k-icon-sm > svg {
            width: var( --kendo-icon-size-sm, 0.875rem );
            height: var( --kendo-icon-size-sm, 0.875rem );
        }

        &.k-icon-lg > svg {
            width: var( --kendo-icon-size-lg, 1.25rem );
            height: var( --kendo-icon-size-lg, 1.25rem );
        }

        &.k-icon-xl > svg {
            width: var( --kendo-icon-size-xl, 1.5rem );
            height: var( --kendo-icon-size-xl, 1.5rem );
        }

        &.k-icon-xxl > svg {
            width: var( --kendo-icon-size-xxl, 2rem );
            height: var( --kendo-icon-size-xxl, 2rem );
        }

        &.k-icon-xxxl > svg {
            width: var( --kendo-icon-size-xxl, 3rem );
            height: var( --kendo-icon-size-xxl, 3rem );
        }
    }


    // Clear value
    .k-clear-value {
        width: var( --INTERNAL--kendo-input-icon-size, min-content );
        height: var( --INTERNAL--kendo-input-icon-size, min-content );
        outline: 0;
        color: var( --kendo-input-clear-value-text, #{$kendo-input-clear-value-text} );
        flex: none;
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: var( --kendo-input-clear-value-opacity, #{$kendo-input-clear-value-opacity} );
    }
    .k-clear-value:hover,
    .k-clear-value.k-hover {
        color: var( --kendo-input-clear-value-hover-text, #{$kendo-input-clear-value-hover-text} );
        opacity: var( --kendo-input-clear-value-hover-opacity, #{$kendo-input-clear-value-hover-opacity} );
    }
    .k-clear-value:focus-visible {
        outline: 1px dotted;
        outline-offset: -1px;
    }

    // Input button
    .k-input-button {
        padding-inline:  var( --INTERNAL--kendo-input-button-padding-x, 0 );
        padding-block: var( --INTERNAL--kendo-input-button-padding-y, 0 );
        border-width: 0;
        border-radius: 0;
        border-color: inherit;
        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::after {
            outline: none;
        }
    }
    .k-input-outline .k-input-button {
        border-inline-start-width: var( --kendo-input-button-border-width, 1px );
    }
    .k-picker .k-input-button {
        color: inherit;
        background: none;
        border-color: transparent;
    }


    // Input spinner
    .k-input-spinner {
        flex: none;
        display: flex;
        flex-flow: column nowrap;

        .k-spinner-increase,
        .k-spinner-decrease {
            padding-inline: var( --INTERNAL--kendo-input-button-padding-x, 0 );
            padding-block: var( --INTERNAL--kendo-input-button-padding-y, 0 );
            border-width: 0;
            border-inline-start-width: var( --kendo-input-button-border-width, 1px );
            border-radius: 0;
            border-color: var( --INTERNAL--kendo-input-border, inherit );
            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  {
            bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
        }

        .k-spinner-decrease .k-icon  {
           top: 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;
    }

    // Fill mode
    .k-input-flat,
    .k-picker-flat {
        @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
        border-width: var( --kendo-input-border-width, #{$kendo-input-border-width} ) 0;
        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important

        &:focus,
        &.k-focus,
        &:focus-within {

            &::after {
                border-width: 0 0 var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} ) 0;
            }

        }

        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {

            &:focus,
            &.k-focus,
            &:focus-within {

                &::after {
                    border-width: 0 0 var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} ) 0;
                }
            }
        }
    }

    .k-input-flat,
    .k-input-outline {
        background: none !important; // stylelint-disable-line declaration-no-important
    }

    // 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 );
        $_icon-size: map.get( $size-props, icon-size );
        $_button-padding-x: map.get( $size-props, button-padding-x );
        $_button-padding-y: map.get( $size-props, button-padding-y );
        $_button-width: map.get( $size-props, button-width );

        .k-input-#{$size},
        .k-picker-#{$size} {
            --INTERNAL--kendo-input-font-size: #{$_font-size};
            --INTERNAL--kendo-input-line-height: #{$_line-height};
            --INTERNAL--kendo-input-padding-x: #{$_padding-x};
            --INTERNAL--kendo-input-padding-y: #{$_padding-y};
            --INTERNAL--kendo-input-button-padding-x: #{$_button-padding-x};
            --INTERNAL--kendo-input-button-padding-y: #{$_button-padding-y};
            --INTERNAL--kendo-input-icon-size: #{$_icon-size};

            .k-input-button {
                width: if( $kendo-use-input-button-width, var( --kendo-input-button-width, #{$_button-width} ), auto );
            }

            .k-input-spinner {
                width: if( $kendo-use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
            }

            &.k-icon-picker > .k-input-inner {
                width: var( --kendo-input-icon-picker-width, #{$_button-width} );
            }

            .k-input-prefix > .k-icon,
            .k-input-prefix > .k-input-prefix-text,
            .k-input-suffix > .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;
                }
            }
        }
    }

    // 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;
    }
}