.form{
    button[type="submit"]{
        margin-top: $spacing;
    }
}

.form--limit{
    max-width: 500px;
    margin: 0 auto;   
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: transparentize($formPlaceholder, 0.6);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: transparentize($formPlaceholder, 0.6);
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: transparentize($formPlaceholder, 0.6);
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: transparentize($formPlaceholder, 0.6);
}

input[type="email"], 
input[type="password"], 
input[type="text"], 
input[type="tel"], 
input[type="search"], 
textarea, 
select {
    background-color: $form;
    border: none;
    width: 100%;
    min-width: 80px;
    padding: $spacing;
    box-sizing: border-box;
    border-radius: $radius;
    outline: none;
    border: 1px solid $formBorder;
    appearance: none;
    min-width: $formMin;

    &:focus, &:active {
        border: 1px solid $formBorder--active;
        color: $formActive;
    }
}

textarea {
    resize: vertical;
}

label {
    cursor: pointer;

    @if not $formLabels {
        display: none;
    }
}

.form__group{
    margin-top: $spacing;

    &:first-child{
        margin-top: 0;
    }
}

.form__icon{
    position: relative;

    input {
        padding-right: #{$iconSize + $spacing};
    }

    svg{
        color: $formIcon;
    }

    & > div, & > button{
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: #{$iconSize};
        margin: auto !important;

        .icon{
            width: 1em;
            min-width: 1em;
            padding-bottom: 1em;
        }
    }

    & > button{
        outline: none;

        .icon{
            vertical-align: middle;
        }

        &:hover, &:active, &:focus{
            svg{
                fill: $formIcon--active;
            }
        }
    }

    & > div{
        & > *{
            top: 50%; left: 50%; bottom: 0; right: 0;
            transform: translateX(-50%) translateY(-50%);
        }
    }
}

select {
    box-shadow: none;
    appearance: none;
    cursor: pointer;

    & + div, & + button{
        pointer-events: none;
    }

    option {
        outline: none;
    }

    &:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 $formActive;
    }
}

@media screen\9 {
    .select__icon {
        display:none;
    }
}

@media screen\0 {
    .select__icon {
        display:none;
    }
}

.select__icon{
    pointer-events:none;
}
