::placeholder{
    opacity: 0;
}

.sw-form-input-wrapper{
    position: relative;            
    border-radius: 4px;

    .sw-form-input{
        background: none;
        border: none;
        line-height: 24px;
        border-bottom: 1px solid $gray-6;
        display: block;
        width: 100%;            
        padding: 2px 4px;
    
        &.is-invalid{
            border-bottom : 1px solid $danger !important;
        }
    
    }
    
    .sw-form-input-label{
        position: absolute;
        padding: 5px 5px 0px 5px;
        color: $gray-6;
        user-select: none;
        display: block;
        pointer-events: none;
        transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
    
        &.active{
            padding: 0 5px;    
            font-size: 0.85em;
            letter-spacing: 0.058em;
            color: var(--theme-primary);
            transform: translate(-2px, -18px) scale(1);        
        }
    
        &.active ~ .sw-form-input{
            border-bottom: 2.5px solid var(--theme-primary);
        }
    
        &.active ~ .sw-form-input-bordered{
            border: 2.5px solid var(--theme-primary);
        }
    }
    
    
    .sw-form-input-bordered{
        background: none;
        border: none;
        line-height: 24px;
        border: 1px solid $gray-6;
        border-radius: 4px;
        display: block;
        width: 100%;            
        padding: 2px 4px;
    
        &.is-invalid{
            border : 1px solid $danger !important;
        }
    
        ~ .sw-form-input-label{
            color: #000 !important;
            background: blue;
        }
       
    }
}

.invalid-text{
    font-size: smaller;
    letter-spacing: 0.08em;
    color: $danger;
}