@import '../mix/variables';
@import '../mix/functions';

.formee {

    input[type="datetime"],
    input[type="file"],
    input[type="month"],
    input[type="range"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    input[type="url"],
    input[type*="date"],
    input[type="number"],
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="file"],
    input[type="search"],
    textarea,
    select {
        width: 100%;
        color: @input-color;
        padding: 9px 15px 8px;
        background: @input-bg;
        border: 1px solid @input-border;
        transition: .2s;
        font-size: 14px;
        height: 40px;

        &:hover,
        &:focus {
            color: @input-color;
            border-color: @input-color;
        }

        &[disabled] {
            cursor: not-allowed;
        }
    }

    select {
        padding-top: 8px;
        padding-bottom: 8px;
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
    }

    label {
        display: block;
        margin: 0 0 8px;
        font-size: 10px;
        line-height: .9em;
        text-transform: uppercase;
        color: @color-graygreen;
    }

    textarea {
        height: 8em;
        resize: vertical;
    }
    // placeholder -> mensgem de erro
    .cfw-input-invalid input::-webkit-input-placeholder {
        color: @input-error--placeholder;
        opacity: 1;
    }

    .cfw-input-invalid textarea::-webkit-input-placeholder {
        color: @input-error--placeholder;
        opacity: 1;
    }

    .cfw-input-invalid input:-ms-input-placeholder {
        color: @input-error--placeholder;
        opacity: 1;
    }

    .cfw-input-invalid textarea:-ms-input-placeholder {
        color: @input-error--placeholder;
        opacity: 1;
    }

    .cfw-input-invalid input::-moz-placeholder {
        color: @input-error--placeholder;
        opacity: 1;
    }

    .cfw-input-invalid textarea::-moz-placeholder {
        color: @input-error--placeholder;
        opacity: 1;
    }

    .cfw-input-invalid input:-moz-placeholder {
        color: @input-error--placeholder;
        opacity: 1;
    }

    .cfw-input-invalid textarea:-moz-placeholder {
        color: @input-error--placeholder;
        opacity: 1;
    }
    // placeholders -> default input´s
    input::-webkit-input-placeholder {
        color: @input--placeholder;
        opacity: 1;
    }

    textarea::-webkit-input-placeholder {
        color: @input--placeholder;
        opacity: 1;
    }

    input:-ms-input-placeholder {
        color: @input--placeholder;
        opacity: 1;
    }

    textarea:-ms-input-placeholder {
        color: @input--placeholder;
        opacity: 1;
    }

    input::-moz-placeholder {
        color: @input--placeholder;
        opacity: 1;
    }

    textarea::-moz-placeholder {
        color: @input--placeholder;
        opacity: 1;
    }

    input:-moz-placeholder {
        color: @input--placeholder;
        opacity: 1;
    }

    textarea:-moz-placeholder {
        color: @input--placeholder;
        opacity: 1;
    }
    // button, input submit, input reset
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    button {
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        cursor: pointer;
        text-align: center;
        display: table;
        line-height: 50px;
        color: @input-bg;
        padding: 0 59px;
        border: 0;
        background: @color-graygreen;

        &[disabled] {
            cursor: not-allowed;
        }
    }
    // grid
    .col1,
    .col2,
    .col3,
    .col4,
    .col5,
    .col6,
    .col7,
    .col8,
    .col9,
    .col10,
    .col11,
    .col12 {
        .column(12);
        margin: 10px 0;
        position: relative;
    }
}

@media screen {
    @media (max-width: 364px){
        .w-captcha {
            padding:0 !important;
        }
    }

    @media (max-width:739px){
        .w-captcha > div{
            display: table;
            margin: 0 auto;
        }

        // button, input submit, input reset
        input[type="submit"],
        input[type="button"],
        input[type="reset"],
        button {
            margin-left: auto;
            margin-right: auto;
        }
    }

    @media (min-width: 740px) {
        .formee{
            .col1   { .column(1,@resume:true); }
            .col2   { .column(2,@resume:true); }
            .col3   { .column(3,@resume:true); }
            .col4   { .column(4,@resume:true); }
            .col5   { .column(5,@resume:true); }
            .col6   { .column(6,@resume:true); }
            .col7   { .column(7,@resume:true); }
            .col8   { .column(8,@resume:true); }
            .col9   { .column(9,@resume:true); }
            .col10  { .column(10,@resume:true); }
            .col11  { .column(11,@resume:true); }

            // button, input submit, input reset
            input[type="submit"],
            input[type="button"],
            input[type="reset"],
            button {
                &.is-centered{
                    margin-left: auto;
                    margin-right: auto;
                }

                &.is-right{
                    margin-left: auto;
                    margin-right: 0;
                }
            }
        }
    }
}