@import 'variable.scss';

/* ==========================================================================
 *
 * File Name:         Form
 * Description:       Stylished form for your webpage
 * Editing Details:   Change font, box styleline properties as needed
 * Use:               Use <input type="text"> and affiliates to display form on 
                      your website
 * Affiliates:        Works with the align list of classes to set text direction
                      of the form text
 * Source:            For more information of the code source, please visit:
                      https://www.w3schools.com/css/css_form.asp         
 ============================================================================ */

//bottom line focused Inputs form
.bottom-line-focused-input-form {
    input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: none;
        border-bottom: 2px solid $beet;
    }

    input[type=text]:focus {
        background-color: $light-gray;
    }
}

//animated search form
.animated-search-form {
    input[type=text] {
        width: 130px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-image: url('searchicon.png');
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
        transition: width 0.4s ease-in-out;
    }
      
    input[type=text]:focus {
    width: 100%;
    }
}

//textarea
.textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid $beet;
    border-radius: 4px;
    background-color: $mute;
    font-size: 16px;
    resize: none;
}

//select menu
.select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: $mute;
}

//form width
.form-width-full {
    width:100%;
}
.form-width-half {
    display: flex;
    flex-flow: column;
    width:50%;
}