@use "./_variables.scss" as *;
@use "../core/_index.scss" as *;
@use "@progress/kendo-theme-core/scss/components/input/_layout.scss" as *;


@mixin kendo-input--layout() {

    @include kendo-input--layout-base();

    // Fill mode
    .k-input-solid,
    .k-picker-solid {
        @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

        .k-input-button,
        .k-input-spinner .k-spinner-increase,
        .k-input-spinner .k-spinner-decrease {
            background: none;
            border-color: transparent;
        }
    }


    .k-input-flat,
    .k-picker-flat {

        .k-input-button,
        .k-input-spinner .k-spinner-increase,
        .k-input-spinner .k-spinner-decrease {
            background: none;
            border-color: transparent;
        }
    }


    // Disabled
    .k-input,
    .k-picker {

        .k-button {
            &:hover,
            &.k-hover,
            &:focus,
            &.k-focus {
                box-shadow: none;
                outline: none;
            }
        }

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


    // Input ripple
    .k-input-solid,
    .k-input-flat,
    .k-input-outline,
    .k-picker-solid,
    .k-picker-flat,
    .k-picker-outline {
        $_kendo-input-ripple-border-width: (2 * $kendo-input-border-width);

        &::after {
            content: "";
            border-width: 0 0 $_kendo-input-ripple-border-width;
            border-style: solid;
            border-color: inherit;
            border-radius: inherit;
            display: block;
            position: absolute;
            z-index: 2;
            inset: -1px;
            opacity: 0;
            transform: scaleX(0);
            transition: opacity .3s, transform .3s;
            pointer-events: none;
        }

        &.k-focus::after {
            opacity: 1;
            transform: scaleX(1);
        }
        &:focus-within::after {
            opacity: 1;
            transform: scaleX(1);
        }
    }
    .k-input-outline,
    .k-picker-outline {
        $_kendo-input-ripple-border-width: (2 * $kendo-input-border-width);

        &::after {
            border-width: $_kendo-input-ripple-border-width;
            transform: none;
        }

        &.k-focus::after {
            transform: none;
        }
        &:focus-within::after {
            transform: none;
        }
    }

}