.form-group {
    margin-bottom: 1rem;
    label {
        display: block;
        margin-bottom: 0.2rem;
        font-weight: bold;
        font-size: 0.8rem;
    }
}

@mixin form-control-style {
    padding: 0.25rem 0.5rem;
    color: #fff;
    background: $vue-dark;
    border: 1px solid lighten($vue-dark, 10);
    border-radius: 0.25rem;
    width: 100%;
    outline: none;
    &:focus {
        box-shadow: 0 0 1rem -0.25rem $vue-light;
    }
    &.inline-control {
        width: auto;
    }
}

.form-control {
    font-family: inherit;
    font-size: inherit;
    &[type='text'], &[type='email'], &[type='password'], &[type='tel'], &[type='number'], &[type='date'] {
        @include form-control-style;
        &::placeholder {
            color: #aaa;
        }
    }
    &[type='radio'], &[type='checkbox'] {
        outline-color: #42b983
    }
}

textarea.form-control, select.form-control {
    @include form-control-style;
}

.form-errors {
    color: #ff676a;
    margin: 0.5rem 0 0;
    padding: 0;
    li {
        margin: 0;
        padding: 0;
    }
}

.button {
    font-family: inherit;
    padding: 0.25rem 0.5rem;
    border: 1px solid lighten($vue-dark, 15);
    border-radius: 0.25rem;
    background: lighten($vue-dark, 10);
    outline: none;
    color: #fff;
    &[type='submit'] {
        background-color: darken($vue-light, 5);
        border-color: darken($vue-light, 5);
        &:hover {
            background-color: lighten($vue-light, 5);
            border-color: lighten($vue-light, 5);
        }
    }
    &:hover {
        cursor: pointer;
        background: lighten($vue-dark, 20);
    }
    &:focus {
        border-color: lighten($vue-dark, 30);
    }
}