/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/forms_vars";
@import "../variables/text-inputs_vars";
@import "../mixins";

.dlt-form-item,
.dlt-form-number-item,
.dlt-browse-upload-item,
.dlt-drag-drop-item,
.dlt-time-picker-item,
.dlt-multiselect-item {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    align-items: flex-start;
    width: 100%;

    &[disabled="disabled"] {
        opacity: $forms-opacity-disabled;
        cursor: not-allowed;

        .dlt-button {
            pointer-events: none;
        }

        .dlt-number-input {
            cursor: not-allowed;
        }

    }

    &:hover .dlt-text-input:valid~.clear-icon {
        display: inline-flex;
    }

    &:focus-within {
        .dlt-text-input:valid~.clear-icon {
            display: inline-flex;
        }
    }


}

.dlt-form-number-item {
    width: 100%;
}

.dlt-form-label {
    display: inline-block;
    vertical-align: baseline;
    font-weight: $forms-legend-font-weight;
    font-size: $forms-legend-font-size;
    line-height: $input-text-label-line-height;
    color: $forms-color-text;
    padding-bottom: $input-text-label-padding-bottom;
    margin: $input-text-label-margin;
}

.dlt-form-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;

    &[disabled="disabled"] {
        opacity: $forms-opacity-disabled;
        cursor: not-allowed;

        .dlt-button {
            pointer-events: none;
        }
    }

    .dlt-text-input {
        position: relative;
        font-family: $forms-font-family;
        font-weight: $forms-input-font-weight;
        font-size: $forms-input-font-size;
        display: block;
        width: 100%;
        line-height: $forms-input-line-height;
        height: $forms-input-height;
        padding: $forms-input-padding-y $forms-input-padding-x;
        color: $forms-color-text;
        background-color: $forms-color-input-background;
        border-radius: $forms-border-radii;
        border: $forms-border-width $forms-border-style $forms-color-input-border;

        &:invalid, &:required {
            box-shadow: none;
        }

        &[type="text"] {
            padding-right: 1.8rem;
        }

        &[type="password"],
        &.unmasked,
        &.dlt-search {
            padding-right: 3.4rem;
        }

        &::-ms-clear {
            display: none;
        }

        &::-ms-reveal {
            display: none;
        }

        &::placeholder {
            font-style: $forms-input-placeholder-font-style;
            color: $forms-color-placeholder-text;
        }

        /* clears the ‘X’ from Chrome and Safari*/
        &::-webkit-search-decoration,
        &::-webkit-search-cancel-button,
        &::-webkit-search-results-button,
        &::-webkit-search-results-decoration { display: none; }

        &:disabled {
            cursor: not-allowed;
        }

        &:focus,
        &:active:enabled {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            outline-offset: $forms-outline-offset;
            box-shadow: 0 0.18rem 0 0 transparent;
        }

        &:not(:valid)~.clear-icon {
            display: none;
        }

        &:not(:valid)~.password-clear-icon {
            display: none;
        }
    }

    .dlt-number-input {
        position: relative;
        font-family: $forms-font-family;
        font-weight: $forms-input-font-weight;
        font-size: $forms-input-font-size;
        display: block;
        width: 100%;
        line-height: $text-inputs-number-line-height;
        padding: $text-inputs-number-padding;
        color: $forms-color-text;
        background-color: $forms-color-input-background;
        border-radius: $forms-border-radii;
        border: $forms-border-width $forms-border-style $forms-color-input-border;
        @include x-appearance(textfield);

        &::-webkit-inner-spin-button,
        ::-webkit-outer-spin-button {
            @include x-appearance(none);
        }

        &::placeholder {
            font-style: $forms-input-placeholder-font-style;
            color: $forms-color-placeholder-text;
        }

        &::-ms-clear {
            display: none;
        }

        &:disabled {
            opacity: $forms-opacity-disabled;
            resize: none;
        }

        &:disabled~button {
            opacity: $forms-opacity-disabled;
            resize: none;
            cursor: not-allowed;
            pointer-events: none;
            outline: 0 !important;
        }

        // &:hover:enabled,
        &:focus:enabled,
        &:active:enabled {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            outline-offset: $forms-outline-offset;
        }
    }

    .number-controls {
        position: absolute;
        right: 4px;
        display: flex;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;

        .number-step-up-icon {
            position: relative;
            display: inline-block;
            top: -6px;
        }

        .number-step-down-icon {
            position: relative;
            display: inline-block;
            top: -0.4rem;
        }
    }

    .number-step-up,
    .number-step-down {
        text-decoration: none;
        border: none;
        font-size: $text-inputs-number-icon-font-size;
        color: $forms-color-primary;
        background-color: $forms-color-input-background;
        padding: 0;
        margin: 0;
        width: $text-inputs-number-icon-width;
        height: $text-inputs-number-icon-height;
        line-height: 0;
        text-align: center;

        display: inline-block;
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        overflow: hidden;

        &:hover:enabled:not(.number-step-up-gray) {
            color: $forms-color-primary-active;
            cursor: pointer;
        }

        &:focus:enabled:not(.number-step-up-gray) {
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary!important;
            outline-offset: $forms-outline-offset;
            cursor: pointer;
        }
        
        &:active:enabled:not(.number-step-up-gray) {
            background-color: $forms-color-primary-light;
            color: $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary!important;
            outline-offset: $forms-outline-offset;
            outline-offset: -2px;
        }
        
        &:disabled {
            cursor: not-allowed;
        }
    }
    
    .number-step-up-gray {
        outline: none;
        opacity: $forms-opacity-disabled;
        color: $forms-color-primary;
        cursor: unset;
    }
    
    .dlt-textarea {
        line-height: $text-inputs-textarea-line-height;
        padding: $text-inputs-textarea-padding;
        height: $text-inputs-textarea-height;
        resize: none;
    }
    
    .clear-icon,
    .search-icon {
        cursor: pointer;
        position: absolute;
        right: $text-inputs-icon-right;
        text-decoration: none;
        border: none;
        font-size: $text-inputs-close-icon-font-size;
        color: $forms-color-primary;
        background-color: transparent;
        padding: 0;
        margin: 0;
        width: $text-inputs-icon-size;
        height: $text-inputs-icon-size;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: $forms-border-radii;
        
        .dlt-icon-search,
        .dlt-icon-close {
            margin-left: 0;
            margin-right: 0;
        }
        
        &.clear-icon{
            display:none
        }
        
        &:disabled {
            opacity: $forms-opacity-disabled;
            cursor: not-allowed;
        }
        
        &:hover:not(:active):enabled {
            color: $forms-color-primary-active;
        }
        
        &:focus {
            color: $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            outline-offset: $forms-outline-offset;
        }

        &:active:not(:disabled) {
            background-color: $forms-color-primary-light;
            color: $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            outline-offset: $forms-outline-offset;
        }
    }
    
    .password-show-icon,
    .file-upload-icon {
        cursor: pointer;
        position: absolute;
        right: $text-inputs-password-file-icon-right;
        text-decoration: none;
        border: none;
        outline: none;
        font-size: $text-inputs-password-file-icon-font-size;
        color: $forms-color-primary;
        background-color: transparent;
        padding: 0;
        margin: 0;
        width: $text-inputs-icon-size;
        height: $text-inputs-icon-size;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        
        &:hover {
            color: $forms-color-primary-active;
        }
        
        &:focus {
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            outline-offset: $forms-outline-offset;
        }
        
        &:active {
            background-color: $forms-color-primary-light;
            color: $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            outline-offset: $forms-outline-offset;
        }
        
        &:disabled {
            cursor: not-allowed;
            pointer-events: none;
            background-color: transparent;
            opacity: $forms-opacity-disabled;
        }
    }
    
    .clear-icon-more-padding {
        right: $text-inputs-password-file-close-icon-right;
    }
}

//Size variations of input fields

.sm-input {
    .dlt-text-input {
        font-size: $forms-input-font-size-sm;
        height: $forms-input-height-sm;
        line-height: $forms-input-line-height-sm;
    }
    
    .dlt-number-input {
        font-size: $forms-input-font-size-sm;
        height: $forms-input-height-sm;
        line-height: $forms-input-line-height-sm;
        padding: $text-inputs-number-padding-sm;
    }
    
    .number-controls {
        right: 4px;
        top: 3px;
    }
    
    .number-step-up {
        margin-top: 1px;
        // margin-bottom: -1px;
    }

    .number-step-up,
    .number-step-down {
        width: $text-inputs-number-icon-width-sm;
        height: $text-inputs-number-icon-height-sm;
        font-size: $text-inputs-number-icon-font-size-sm;
        &:focus,
        &:active:enabled {
            outline-offset: -3px;
        }
        .number-step-up-icon {
            top: -6px;
            right: 1px;
        }

        .number-step-down-icon {
            top: -5px;
            right: 1px;
        }
    }

    .dlt-date-picker {
        font-size: $forms-input-font-size-sm;
        height: $forms-input-height-sm;
        line-height: $forms-input-line-height-sm;
    }

    .datepicker-icon {
        font-size: $text-inputs-date-icon-font-size;
        line-height: $text-inputs-date-icon-line-height;
        right: $text-inputs-date-icon-right;
        width: $text-inputs-date-icon-width;
    }

    .dlt-select-input {
        font-size: $forms-input-font-size-sm;
        height: $forms-input-height-sm;
        line-height: $forms-input-line-height-sm;
    }

    .select-arrow-icon::after {
        font-size: $forms-input-height-sm;
        line-height: $forms-input-height-sm;
    }

    .dlt-form-label {
        font-size: $forms-input-font-size-sm;
    }

    .clear-icon,
    .password-show-icon {
        font-size: $text-inputs-icon-size-sm;
        width: $text-inputs-icon-size-sm;
        height: $text-inputs-icon-size-sm;
        line-height: $text-inputs-icon-size-sm;
    }

    .clear-icon-more-padding {
        right: calc(0.25rem + 1.25rem);
    }


    .chosen-container-single {

        .chosen-default,
        .chosen-single {
            height: $forms-input-height-sm;
            font-size: $forms-input-font-size-sm;

            span {
                line-height: $forms-input-height-sm;
                font-size: $forms-input-font-size-sm;
            }

            .multiselect-icon {
                font-size: 1rem;
                line-height: 22px;
            }
        }

        .chosen-results li.active-result {
            line-height: $forms-input-font-size-sm;
            font-size: $forms-input-font-size-sm;
        }
    }
}

.lg-input {
    .dlt-text-input {
        padding-left: $text-inputs-padding-left-lg;
        height: $forms-input-height-lg;
    }

    .number-controls {
        right: 8px;
    }

    .dlt-number-input {
        height: $forms-input-height-lg;
        // padding: $forms-input-padding-lg;
        padding: $text-inputs-number-padding-lg;
    }

    .dlt-date-picker {
        height: $forms-input-height-lg;
        padding: $forms-input-padding-lg;
    }

    .datepicker-icon {
        right: $text-inputs-date-icon-right;
        width: $text-inputs-date-icon-width-lg;
    }

    .dlt-select-input {
        padding-left: $text-inputs-padding-left-lg;
        height: $forms-input-height-lg;
    }

    .select-arrow-icon::after {
        right: $text-inputs-select-icon-right-lg;
        line-height: $forms-input-height-lg;
    }

    .clear-icon,
    .password-show-icon {
        right: $text-inputs-icon-right-lg;
    }

    .clear-icon-more-padding {
        right: $text-inputs-password-file-close-icon-right-lg;
    }

    .chosen-container-single {

        .chosen-default,
        .chosen-single {
            height: $text-inputs-select-height-lg;

            span {
                line-height: $text-inputs-select-height-lg;
            }

            .multiselect-icon {
                line-height: $text-inputs-select-height-lg;
            }
        }
    }
}

.error-input {

    .dlt-form-requirement::after {
        background: $forms-color-error;
    }

    .time-picker-holder,
    .chosen-choices,
    .dlt-text-input,
    .dlt-date-picker,
    .dlt-select-input,
    .dlt-number-input,
    .dlt-time-picker {
        border-bottom: $forms-border-width $forms-border-style $forms-color-error;

        &:focus {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            @include box-shadow(0 0 0 0 transparent);
        }

        &:focus-within {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            @include box-shadow(0 0 0 0 transparent);
        }
    }
}

.warn-input {

    .dlt-form-requirement::after {
        background: $forms-color-warning;
    }

    .time-picker-holder,
    .chosen-choices,
    .dlt-text-input,
    .dlt-date-picker,
    .dlt-select-input,
    .dlt-number-input,
    .dlt-time-picker {
        border-bottom: $forms-border-width $forms-border-style $forms-color-warning;

        &:focus {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            @include box-shadow(0 0 0 0 $forms-color-warning);
        }

        &:focus-within {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            @include box-shadow(0 0 0 0 $forms-color-warning);
        }
    }
}

.info-input {

    .dlt-form-requirement::after {
        background: $forms-color-info;
    }

    .time-picker-holder,
    .chosen-choices,
    .dlt-text-input,
    .dlt-date-picker,
    .dlt-select-input,
    .dlt-number-input,
    .dlt-time-picker {
        border-bottom: $forms-border-width $forms-border-style $forms-color-info;

        &:focus {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            @include box-shadow(0 0 0 0 $forms-color-info);
        }

        &:focus-within {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            @include box-shadow(0 0 0 0 $forms-color-info);
        }
    }
}

.success-input {

    .dlt-form-requirement::after {
        background: $forms-color-success
    }

    .time-picker-holder,
    .chosen-choices,
    .dlt-text-input,
    .dlt-date-picker,
    .dlt-select-input,
    .dlt-number-input,
    .dlt-time-picker {
        border-bottom: $forms-border-width $forms-border-style $forms-color-success;

        &:focus {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            @include box-shadow(0 0 0 0 $forms-color-success);
        }

        &:focus-within {
            border: $forms-border-width $forms-border-style $forms-color-primary;
            outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            @include box-shadow(0 0 0 0 $forms-color-success);
        }
    }
}

.dlt-form-requirement {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    padding-top: $text-inputs-message-padding-top;

    &::after {
        position: absolute;
        width: 100%;
        height: 4px;
        background: transparent;
        top: -4px;
        left: 0;
        border-radius: 0 0 $forms-border-radii $forms-border-radii;
        content: " ";
    }

    .error-message {
        font-weight: $text-inputs-message-font-weight;
        font-size: $text-inputs-message-font-size;
        padding-left: $text-inputs-message-padding-left;
        line-height: $text-inputs-message-line-height;

        .error-title {
            font-weight: $text-inputs-message-title-font-weight;
        }
    }

    .input-error-icon {
        color: $forms-color-error;
        font-size: $text-inputs-message-icon-font-size;

        &:before{
            color: $forms-color-error;
        }
    }

    .input-warn-icon {
        color: $forms-color-warning;
        font-size: $text-inputs-message-icon-font-size;

        &:before{
            color: $forms-color-warning;
        }
    }

    .input-info-icon {
        color: $forms-color-info;
        font-size: $text-inputs-message-icon-font-size;

        &:before{
            color: $forms-color-info;
        }
    }

    .input-success-icon {
        color: $forms-color-success;
        font-size: $text-inputs-message-icon-font-size;

        &:before{
            color: $forms-color-success;
        }
    }
}