// FORM STRUCTURE STYLES ===================================
// =========================================================

// Float Label Styles
.float-label-active {    
    position: relative;
    top: -($jcf-font-size + ($jcf-font-size/2)); 
    font-size: .7em; 
    color: $jcf-color-text-secondary;
}



// FORM STYLES ------------------------------------------
// ---------------------------------------------------------
.jcf-form-wrap {
    @extend .card !optional;
    box-sizing: border-box;
    width: $jcf-form-width;
    max-width: $jcf-form-width;
    background-color: $jcf-color-background;
    color: $jcf-color-text-primary; 
    font-family: $jcf-font;
    font-size: $jcf-font-size; 
    margin-left: auto;
    margin-right: auto; 
    padding: $jcf-form-padding;
    
    * {
        box-sizing: border-box;
    }
    
    .jcf-input-group {        
        position: relative;
        margin-bottom: 30px;
    }
    
    input {
        width: 100%;
        background-color: $jcf-color-background;
        color: $jcf-color-text-primary;
        font-size: $jcf-font-size + ($jcf-font-size/2);
        font-weight: 300;
        border: none; 
        border-bottom: 1px solid $jcf-color-divider;
        margin: 0px; 
        padding: 0px ($jcf-form-padding/4) ($jcf-form-padding/4);
        
        &:focus {
            box-shadow: none;
            outline: none; 
            
            + label {    
                // accent underline grow       
                &:after {
                    width: 100%;
                    transition: $jcf-transition-in;
                }
                
                // move label above input
                .float-label {
                    @extend .float-label-active;
                    color: $jcf-color-accent;
                }
            } // end + label
            
        } // end :focus
        
        &.active  {
            + label {
                // move label obove input
                .float-label {
                    @extend .float-label-active;
                }
            }
        }   
    } // end input
    
    label {        
        position: absolute; 
        font-weight: normal;
        top: 0px; 
        right: 0px; 
        bottom: 0px;
        left: 0px; 
        margin: 0px; 
        padding: 0px ($jcf-form-padding/4);
        
        // accent underline hidden
        &:after {
            content: "";
            position: absolute; 
            bottom: -1px;
            left: 0%; 
            height: 3px;
            width: 0%;
            background-color: $jcf-color-accent;
            transition: $jcf-transition-out;
        }
        
        // return to placeholder position
        .float-label {
            position: relative;
            top: 0px;
            transition: $jcf-transition-out;
        }
    } // end label
    
    .input-question {
        font-size: .9em;
        font-weight: 600;
        color: $jcf-color-text-secondary;
        margin-bottom: $jcf-form-padding/4;   
    }
}