@layer base{
    input-generator data-holder{
        position: absolute;
        
        top:0;
        translate:0 calc(50% + 1px);
        transition: 0.2s ease-in-out;
        pointer-events: none;
        text-transform: capitalize;
    }

    input-generator:not(.rdir) data-holder{left:5px;}
    input-generator.rdir data-holder{right:5px;}

    
    input-generator.inp-style-2 data-holder{display:none}
    
    input-generator.inp-style-2 input{margin:0}
    
    input-generator.active data-holder,
    input-generator input:not(:placeholder-shown) ~ data-holder,
    input-generator input:focus ~ data-holder,
    input-generator textarea:not(:placeholder-shown) ~ data-holder,
    input-generator textarea:focus ~ data-holder{translate:0 0 !important;}
    
    input-generator input:not(:placeholder-shown) ~ .clear,input-generator textarea:not(:placeholder-shown) ~ .clear{visibility: visible !important;}
        
    input-generator input.force-holder::placeholder{color : lightgray ;font-weight: 500;font-size: 12px;}
    
    input,textarea{border:none;outline:none;background-color:transparent;}
    
    [type='number'],.numeric{font-family: 'Izmir-Bold';}
    
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active{
        -webkit-background-clip: text;
        -webkit-text-fill-color: #ffffff;
        transition: background-color 5000s ease-in-out 0s;
        box-shadow: inset 0 0 20px 20px #23232329;
    }
    
    input-generator input::placeholder,input-generator textarea::placeholder{color:transparent !important}
    
    input-generator.inp-style-2 input::placeholder{color:var(--input-bord-color-1) !important;font-weight: 550;}
    
    input-generator input{width: calc(100% - 10px);}
    
    input-generator handler{
        position:absolute;
        
        width:60px;
        height:90px;
        
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        
    }
    
    input-generator[data-handler='right'] handler{right:calc(100% + 10px);}
    
    input-generator[data-handler='left'] handler{left:calc(100% + 10px);}
    
    input-generator.handler-active handler{display: flex;z-index: 3;}

    input-generator.error,js-drop.error{border-bottom: 2px solid #C01F20 !important;border-color: #C01F20 !important;}

    input-generator.error::after{
        content: attr(data-message);
        position: absolute;
        top : 0;
        left:0;
        height:100%;
        translate : 5px calc(100% + 2px);
        color:#C01F20;
        font-weight: 550;
        
        font-size: 12px;
        z-index: 100;
        /* border-top: 2px solid #C01F20; */
        
    }

   input-generator[data-message]:not(.error)::after{
        content: attr(data-message);
        position: absolute;
        top : 0;
        left:0;
        height:100%;
        translate : 5px calc(100% + 2px);
        color:var(--accept-color);
        font-weight: 550;
        
        font-size: 14px;
        /* border-top: 2px solid #C01F20; */
        
    } 



    
    input-generator .input-requirements{
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap:11.8px;
    right: 240px;
    padding: 15px;
    bottom:100%;
    left:inherit;
    transform: translateX(calc(100% + 14px));
    font-size: 12px;
    z-index: 5;
        opacity: 0;
        visibility: hidden;
        transition: all .5s;
        
        user-select: none;
        pointer-events: none;
        background-color:#343b45;
        border-radius:5px;
}
.input-requirement{color:#b2a9b3;}
.input-requirement.valid i {color:#01ac2d;}
.input-requirement.valid font {color:#ffffff;}
input-generator.active .input-requirements{visibility: visible;opacity: 1;}
.input-requirements i,.input-requirements span{color:var(--gray)}


    @media (max-width:720px)
    {
        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
          -webkit-appearance: none; 
          margin: 0; 
        }
  
     
    }
}