/*!
 * Copyright 2023 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// Generic input
.k-input,
.k-picker {
    margin: 0;
    padding: 0;
    width: @input-default-width;
    min-width: 0;
    border-width: @input-border-width;
    border-style: solid;
    box-sizing: border-box;
    outline: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: @input-line-height;
    text-align: start;
    box-shadow: none;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: stretch;
    position: relative;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-appearance: none;

    .k-input,
    .k-picker {
        border-width: 0 !important;
        color: inherit;
        background: none;
        font: inherit;
        outline: 0;
        box-shadow: none;
    }

    .k-input-icon,
    .k-input-validation-icon,
    .k-input-loading-icon,
    .k-clear-value {
        width: ~"calc( @{icon-size} + (@{input-padding-y} * 2) )";
        height: ~"calc( @{icon-size} + (@{input-padding-y} * 2) )";
    }

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


// Input
.k-input {}
input.k-input {
    padding: @input-padding-y @input-padding-x;
}


// Picker
.k-picker {
    cursor: pointer;
}
select.k-picker {
    padding: @input-padding-y @input-padding-x;
    appearance: auto;
}


// Input inner
.k-input-inner {
    padding: @input-padding-y @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;

    // Hide clear icon
    &::-ms-clear { display: 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;
}
.k-picker.k-icon-picker .k-input-inner {
    width: @input-height;
    height: @input-height;
    box-sizing: content-box;
}


// 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 {
    width: 100%;
    padding: @input-values-margin-y @input-values-margin-x;
    cursor: text;
}
.k-input-values > .k-searchbar,
.k-input-values > .k-input-inner {
    margin: (-@input-values-margin-y) (-@input-values-margin-x);
}


// Icon picker
.k-icon-picker {
    .k-input-inner {
        padding: @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;
    flex-flow: row nowrap;
    align-items: center;
    flex: none;

    > * {
        flex-shrink: 0;
    }
}


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


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


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


// Input button
.k-input-button,
.k-input-button.k-button {
    width:  @input-button-width;
    height: @input-button-width;
    border-width: 0;
    border-inline-start-width: @input-button-border-width;
    flex: none;
    aspect-ratio: auto;
    box-shadow: none;

    > .k-button-icon {
        min-width: auto !important;
    }

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


// Input spinner
.k-input-spinner {
    width: @input-spinner-width;
    flex: none;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

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

        > .k-button-icon {
            margin: -1em 0;
            min-width: auto !important;
            min-height: auto !important;
        }
    }
    .k-spinner-increase .k-icon {
        bottom: -@input-spinner-icon-offset;
    }
    .k-spinner-decrease .k-icon {
        top: -@input-spinner-icon-offset;
    }
}


// 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 {
    border-radius: 0 !important;
    border-width: @input-border-width 0;
    border-top-color: transparent !important;
    background: none !important;

    .k-input-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.k-input-outline,
.k-picker-outline {
    background: none !important;
}
