$form-required-color: #df280a;
$form-button-icon-width: 24px;
$form-button-icon-height: 24px;

select,
textarea,
input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=date],
input[type=datetime-local],
input[type=text] {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    padding: 5px 6px;
    font-size: .9em;
    vertical-align: middle;
    background-color: #fff;
}
input[type=checkbox] {
    vertical-align: text-bottom;
}
input[type=radio] {
    margin-top: -3px;
    vertical-align: middle;
}
input:disabled {
    border: 1px solid $mid-grey;
    background-color: $light-grey;
}

.datetime-picker {
    width: 70px;
    margin: 0;
    + .time-picker {
        margin-top: 4px;
    }
}
.time-picker {
    display: block;
    b {
        width: 4px;
        display: inline-block;
        vertical-align: middle;
    }
    .datetime-picker {
        &:first-child {
            width: 70px - 4px;
        }
        &:nth-of-type(2) {
            width: 70px - 5px;
        }
        &:last-child {
            width: 70px;
        }
    }
}

label,
.label {
    color: $dark-grey;
    display: inline-block;
    -webkit-user-select: none;
    user-select: none;
}
label,
span {
    &.required {
        em {
            display: none;
        }
        &:after {
            content: ' *';
            color: $form-required-color;
            font-size: 12px;
        }
    }
}

p.required,
.validation-advice {
    margin: 5px 0 0;
    color: $form-required-color;
    font-size: .75em;
}

.form-response {
    &-message {
        @extend .message;
        .form-response & {
            margin: 0
        }
    }
}

form {
    div[submit-error],
    div[submit-success] {
        @extend %animation-slide-in;
        position: fixed;
        z-index: 100;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
}

.amp-form {
    &-submitting,
    &-submit-success {
        button[type=submit] {
            position: relative;
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -($form-button-icon-width / 2);
                margin-left: -($form-button-icon-height / 2);
            }
            span {
                visibility: hidden;
            }
        }
    }
    &-submitting {
        button[type=submit] {
            @extend %animation-blink;
            cursor: wait;
            &:after {
                @extend %animation-rotate;
                @include icon-mask(
                    $icon: $icon-refresh-empty,
                    $color: currentColor,
                    $width: $form-button-icon-width,
                    $height: $form-button-icon-height
                );
            }
        }
    }
    &-submit-success {
        button[type=submit] {
            &:after {
                @extend %animation-appear;
                @include icon-mask(
                    $icon: $icon-checkmark-empty,
                    $color: currentColor,
                    $width: $form-button-icon-width,
                    $height: $form-button-icon-height
                );
            }
        }
    }
    &-submit-error {
        button[type=submit] {
            @extend %animation-shake;
        }
    }
}