///////////////////////
// Forms
////
// Specific layout used in forms
// 

form.js-contact-form
    margin-top: 60px
    fieldset
        background-color: unset
        .form-field-set
            display: flex
            flex-wrap: wrap
            margin-right: -18px
            margin-left: -18px
        .form-field
            position: relative
            flex-basis: 50%
            padding-right: 18px
            padding-left: 18px
            label 
                margin-bottom: 10px
                display: block
            select 
                appearance: none
                &:invalid
                    color: #989292
            input[type="text"], textarea, select
                @extend .text--large
                width: 100%
                background-color: unset
                box-shadow: none
                border-radius: 11px
                border: 1px solid $grey
                margin-bottom: 32px
                padding: 10px 20px
                &::placeholder
                    color: #989292
                &:focus
                    border-bottom-width: 4px
                    outline: none
                    margin-bottom: 29px
            .form-field-error
                @extend .text--xx-small
                color: $error-red
                position: absolute
                bottom: 10px
            &.error 
                label 
                    color: $error-red
            .radio-container
                display: flex
                justify-content: space-between
                .radio-single
                    display: flex
                    input[type='radio']
                        appearance: none
                        margin: 0
                        min-width: 40px
                        width: 40px
                        height: 40px
                        border: 7px solid #fff
                        border-radius: 5px
                        outline: 1px solid $grey
                        transform: translateY(-0.075em)
                        margin-right: 8px
                        cursor: pointer
                        &:checked
                            background-color: $dark

                    label
                        color: #989292
                        max-width: 180px
                        text-align: left
        input[type="submit"]
            @include btn(light-on-dark)
            text-transform: uppercase
            margin-top: 0px
            padding-right: 40px
            cursor: pointer
            float: right
.js-contact-feedback
    text-align: right

            //#989292