@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";
.form {
    &-group {
        position: relative;
        .input-field {
            font-family: var(--inter-font);
            font-size: size(18);
            font-weight: 400;
            width: 100%;
            line-height: 1;
        }

        textarea + label {
            top: 23px !important;
        }
        
        .input-field>label {
            // display: inline-block;
            // position: absolute;
            // top: 50%;
            // left: 13px;
            color: $blackPrimary;
            // transform: translateY(-50%);
            
        }
        .input-field>.mobile-input>input,
        .input-field>.mobile-input>.code,
        .input-field>input,
        .input-field>textarea {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            border: none;
            border-bottom: 1px solid rgba($blackPrimary, 0.6);
            // border-width: 0 0 2px 0;
            padding: 13px 13px 13px 0;
            font-family: var(--inter-font);
            font-size: size(18);
            font-weight: 400;
            width: 100%;
            line-height: 1;
            /* Safari */
            /* Firefox */
            width: 100%;
            height: inherit;
            color: $blackPrimary;
            background-color: transparent;
            -webkit-box-shadow: none;
            box-shadow: none;
            // border-radius: 5px;
        }
        .input-field>.mobile-input>.code {
            width: max-content;
            position: relative;
            padding: 14px 20px 15px 0;
            @include max(640){
                padding: 14px 20px 15px 0;
            }
            color: rgba($primary, 0.2);
            &::after {
                content: '';
                background-color: rgba($primary, 0.2);
                width: 1px;
                height: 20px;
                position: absolute;
                right: 10px;
                color: rgba($primary, 0.2);
            }
        }
        .input-field>.mobile-input>input:not(:focus)::placeholder,
        .input-field>.mobile-input>.code:not(:focus)::placeholder,
        .input-field>.mobile-input>input:focus::placeholder,
        .input-field>.mobile-input>.code:focus::placeholder,
        .input-field>input:not(:focus)::placeholder,
        .input-field>textarea:not(:focus)::placeholder,
        .input-field>input:focus::placeholder,
        .input-field>textarea:focus::placeholder {
            font-weight: $normal !important;
            font-size: size(15);
            color: $grey;
            font-family: var(--inter-font);
        }
        .input-field>.mobile-input>input:disabled::-ms-input-placeholder,
        .input-field>.mobile-input>.code:disabled::-ms-input-placeholder,
        .input-field>.mobile-input>input:disabled::-moz-placeholder-shown,
        .input-field>.mobile-input>.code:disabled::-moz-placeholder-shown,
        .input-field>input:disabled::-ms-input-placeholder,
        .input-field>input:disabled::-moz-placeholder-shown,
        .input-field>textarea:disabled::-ms-input-placeholder,
        .input-field>textarea:disabled::-moz-placeholder-shown{
            color: $blackPrimary !important;
            border-bottom: solid 1px rgba($blackPrimary, 0.2) !important;
        }
        .input-field>.mobile-input>input:disabled,
        .input-field>.mobile-input>.code:disabled,
        .input-field>.mobile-input>input:disabled,
        .input-field>.mobile-input>.code:disabled,
        .input-field>input:disabled,
        .input-field>textarea:disabled {
            color: rgba($blackPrimary, 0.2) !important;
            border-bottom: solid 1px rgba($blackPrimary, 0.2) !important;
        }
        .error {
            color: $error !important;
        }
        .error-input {
            color: $error !important;
            border-bottom: solid 1px $error !important;
            &::placeholder {
                color: $error;
            }
        }
        .success {
            color: $success !important;
        }
        .success-input {
            color: $success !important;
            border-bottom: solid 1px $success !important;
        }
        .message {
            position: absolute;
            left: 0;
            bottom: -18px;
        }
        // .input-field{
        //     textarea:not(:placeholder-shown),
        //     input:not(:placeholder-shown),
        //     input:focus {
        //         // border: 1px solid $blueSecondary;
        //         + label{
        //             color: $blueSecondary;
        //             background: $white;
        //         }
        //     }
        //     textarea:not(:placeholder-shown),
        //     textarea:focus {
        //         + label{
        //             color: $blueSecondary;
        //             background: $white;
        //             font-size: size(12);
        //             top: 0 !important;
        //         }
        //     }
        //     // textarea:focus,input:focus{
        //     //     border: 1px solid $blueSecondary;
        //     // }
        // }
    }
}
.date-input {
    input {
        border: none;
        color: $primary;
        font-family: var(--inter-font);
        font-size: size(18);
        font-weight: $semiBold;
        text-decoration: underline;
        width: 100px;
    }
}
.accordian{
    overflow: hidden;
    transition: max-height 0.5s ease;
    max-height: 0;
    &--max{
        transition: all 0.4s ease-in-out;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
    }
    &--max.show{
        max-height: 500px;
        opacity: 1;
    }
}