@use "sass:map";
@use "../../mixins/index.import.scss" as *;
@use "../../color-system/_swatch-legacy.scss" as *;
@use "../../color-system/_constants.scss" as *;
@use "./_variables.scss" as *;
@use "../icons/_variables.scss" as *;

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

    // Generic input
    .k-input,
    .k-picker {
        @include border-radius( $kendo-input-border-radius );
        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-size: $kendo-input-font-size;
        line-height: $kendo-input-line-height;
        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;

        *,
        *::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: $kendo-input-placeholder-text;
            opacity: $kendo-input-placeholder-opacity;
            user-select: none;
        }
    }

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

        &:disabled,
        &[disabled] {
            @include disabled( $kendo-disabled-styling... );
        }
    }

    :is([disabled], .k-disabled) :is(input.k-input, textarea.k-textarea):is(:disabled, [disabled]) {
        opacity: 1;
        filter: grayscale(0);
    }

    textarea.k-textarea {
        overflow: auto;
    }


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

        &:disabled,
        &[disabled] {
            @include disabled( $kendo-disabled-styling... );
        }
    }

    :is([disabled], .k-disabled) select.k-picker:is(:disabled, [disabled]) {
        opacity: 1;
        filter: grayscale(0);
    }


    // Input inner
    .k-input-inner {
        padding-block: $kendo-input-padding-y;
        padding-inline: $kendo-input-padding-x;
        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: $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;
    }
    .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;
        cursor: text;
    }
    .k-input-values .k-chip-list {
        display: contents;
    }


    // Icon picker
    .k-icon-picker {
        > .k-input-inner {
            padding: $kendo-input-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: 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;
        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;
            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: $kendo-input-border-width 0;
        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
        background-image: none !important; // stylelint-disable-line declaration-no-important
    }

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

        .k-input-#{$size},
        .k-picker-#{$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-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;
                }
            }

            &.k-icon-picker > .k-input-inner {
                width: calc( ( #{ $_line-height} * 1em ) );
                height: calc( ( #{ $_line-height} * 1em ) );
                padding: $_padding-y;
                box-sizing: content-box;
            }
        }
        .k-dropdown-operator.k-picker-#{$size} {
            .k-input-button {
                padding: $_padding-y;
            }
        }
        select.k-picker-#{$size} {
            padding-block: $_padding-y;
            padding-inline: $_padding-x;
        }
    }


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

}


@mixin kendo-input--layout() {
    @include kendo-input--layout-base();
}