/* ==========================================================================
   8.0 Forms
   ========================================================================== */

::-webkit-input-placeholder {
    @include input-placeholder;
}

:-moz-placeholder {
    @include input-placeholder;
}

:-ms-input-placeholder {
    @include input-placeholder;
}

form {
    * {
        outline: 0;
    }
    
    ul {
        position: relative;
        margin: 0 auto;
        list-style: none;
        
        > li > label {
            display: block;
            margin-bottom: 0;
            @include fontsize(14);
            line-height: 2;
        }
    }
    
    li fieldset {
        padding: 0;
        margin: 0;
        border: none;
    }
    
    button {
        cursor: pointer;
    }
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="file"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
textarea,
select {
    height: 52px;
    padding: 5px var(--form-side-padding);
    background: none;
    border-color: var(--form-bd);
    border-style: solid;
    border-width: var(--form-bd-width);
    border-radius: var(--form-radius);
    color: var(--text-color);
    @include fontsize(16);
	line-height: 2;
    font-weight: 400;
    transition: 0.3s;
    -webkit-appearance: none;
    
    &:focus {
        outline: 0;
        border-color: var(--form-bd-focus);
    }
    
    .cs-form-underline & {
        border-top: none;
        border-right: none;
        border-left: none;
    }
    
    .cs-form-underline .cs-form-square &,
    .cs-form-underline .cs-form-rounded &,
    .cs-form-underline .cs-form-pill & {
        border-color: var(--form-bd);
        border-style: solid;
        border-width: var(--form-bd-width);
    }

    &.error {
        --form-bd: #a00;
    }
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="file"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
textarea {
    width: 100%;
}

.cs-form-underline {
    --form-radius: 0px;
    --form-side-padding: 0px;
}

.cs-form-square {
    --form-radius: 0px;
    --form-side-padding: 15px;
}

.cs-form-rounded {
    --form-radius: 5px;
    --form-side-padding: 15px;
}

.cs-form-pill {
    --form-radius: 50px;
    --form-side-padding: 15px;
}

textarea {
    display: block;
    min-height: 120px;
	resize: vertical;
}

input[type="submit"] {
    @include button;
}

select {
    -webkit-appearance: auto;
}

form.post-password-form {
    label {
        position: relative;
        z-index: 9;
        display: inline-block;
        width: 280px;
        height: 52px;
        padding-left: 10px;
        color: $text-color;
        font-family: var(--heading-font);
        @include fontsize(16);
        line-height: 52px;
        text-align: left;
        vertical-align: bottom;
        
        input[type="password"] {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            padding: 0 0 0 80px;
        }
    }
        
    input[type="submit"] {
        width: 130px;
        margin: 8px 0 0 0;
        padding: 0;
    }
}

.search-form {
    position: relative;
    max-width: 600px;
    
    input[type="search"] {
        padding-right: 60px;
        height: 50px;
        @include fontsize(16);
    }
    
    .search-submit {
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 50px;
        background: none;
        border: none;
        box-shadow: none;
        color: inherit;
        
        &:before {
            position: relative;
            z-index: 3;
            @include fontAwesome;
            @include fontsize(16);
            line-height: 50px;
            content: "\f002";
        }
    }
}

.cs-form-label {
    font-family: var(--heading-font);
    @include fontsize(16);
}

// Fixing select dropdown color issues under Windows system
select option {
    .light-color & {
        background: #fff;
        color: #000;
    }
    
    .dark-color & {
        background: #000;
        color: #fff;
    }
}

// For bbPress
.bbp-search-form input[type="text"] {
    display: inline-block;
    width: auto;
}

#bbpress-forums div.bbp-the-content-wrapper .quicktags-toolbar input[type="button"] {
    letter-spacing: 0;
}

// Contact Form 7
.wpcf7-form {
    select {
        width: 100%;
    }
    
    .wpcf7-spinner {
        position: absolute;
    }
    
    .dark-color & ::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }

    p {
        margin-bottom: 20px;
    }

    input[type="submit"] {
        width: 100%;
    }
}

.select-wrap {
    position: relative;
    
    &:after {
        @include fontElegant;
        content: "\33";
        font-size: 16px;
        position: absolute;
        right: 5px;
        top: 0;
        line-height: 42px;
    }
}

@include screen(handheld-m) {
    form.post-password-form {
        input[type="submit"] {
            margin: 0 0 0 8px;
        }
    }
    
    .form-submit input[type="submit"] {
        padding: 0 45px;
    }
}

@include screen(handheld-l) {
    .select-wrap {
        &.col-1-2,
        &.col-1-3 {
            &:after {
                right: 20px;
            }
        }
    }
}