@import '~@wordpress/base-styles/colors.native';


.wpzoom-forms_form,
.wp-block-wpzoom-forms-form {


    /* Box Sizing Reset
    -----------------------------------------------*/

    /* All of our custom controls should be what we expect them to be */
    input,
    textarea
    {
        box-sizing:content-box;
    }

    /* These elements are usually rendered a certain way by the browser */
    button,
    input[type=reset],
    input[type=button],
    input[type=submit],
    input[type=checkbox],
    input[type=radio],
    select
    {
        box-sizing:border-box;
        opacity: 1;
    }

    input[type=checkbox],
    input[type=radio] {
        margin-right: 10px;
        vertical-align: middle;
    }

    input[type=checkbox] {
        display: block;
        float: left;
        position: relative;
        top: 10px;
    }

    input[type=checkbox] + label {
        display: block !important;
        clear: right !important; 
    }

    input[type=date],
    input[type=datetime],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=range],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    select,
    textarea {
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 2px;
        color: #333;
        display: block;
        float: none;
        font-size: 16px;
        font-family: inherit;
        border: 1px solid #ccc;
        padding: 10px 13px;
        margin-bottom: 15px;
        width: 100%;
        line-height: 1.3;
    }

    input[type=submit],
    button[type=submit],
	input[type=button].wp-block-wpzoom-forms-submit-field {
        font-size: 1em;
        padding: 10px 25px;
        margin: 15px 0;
    }
    .wp-block-wpzoom-forms-multi-checkbox-field,
    .wp-block-wpzoom-forms-radio-field {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            margin: 0;
            padding: 0;
            margin-bottom: 5px;
            list-style-type: none;
        }
    }

    .wp-block-wpzoom-forms-checkbox-field,
    .wp-block-wpzoom-forms-multi-checkbox-field {
        margin-bottom: 5px;
    }

	.wp-block-group,
	.wp-block-group__inner-container {
		.wp-block-columns {
			align-items: center;
            margin: 0;

			&:last-child {
				margin-bottom: 0;
			}

			.wp-block-column {
				label {
					margin: 0;
                    cursor: pointer;
                    display: inline-block;
                    vertical-align: middle;
				}

				input:not([type='submit']):not([type='button']), textarea, select {
					// width: 100%;
				}

                textarea, select {
                    width: 100%;
                }
			}
		}
	}

	.wp-block-wpzoom-forms-required {
		color: $alert-red;
		margin: 0 0 0 0.5em;
	}

	strong.has-accent-color.has-text-color {
		color: $alert-red;
	}

	.nomarginright {
		margin-right: 0;
	}

	.fullwidth {
		display: block;
		width: 100%;
	}

    .wp-block-wpzoom-forms-label-field {
        font-weight: 600;
    }

	.notice {
		background-color: $white;
		padding: 8px 16px;
		border-left: 4px solid $blue-wordpress;
		margin: 1em 0;

		&.success {
			background-color: lighten($alert-green, 45%);
			border-left-color: $alert-green;
		}

		&.error {
			background-color: lighten($alert-red, 35%);
			border-left-color: $alert-red;
		}

		p {
			padding: 0;
			margin: 0;
		}
	}
}