@import "~inuitcss/settings/settings.core";
@import "~inuitcss/tools/tools.font-size";
@import "~bourbon-neat/core/neat";
@import "src/css/settings/_global.scss";
@import "src/css/settings/_colors.scss";
@import "src/css/settings/_grid.scss";

.base {
  @include grid-collapse;
}

.field {
  margin-bottom: $inuit-global-spacing-unit;
  font-weight: bold;
}

.invalid {
  border: 1px solid $error-color;
  box-shadow: 0 0 5px rgba($error-color, .4);
}

.userField {
  composes: field;
  @include grid-column;

  @include grid-media($neat-grid) {
    @include grid-column(1 of 2);
  }
}

.messageField {
  composes: field;
  @include grid-column;
}

.submit {
  @include grid-column;
}

.send {
  $bg-color: $success-color;
  $text-color: #f1f8e9;

  background-color: $bg-color;
  color: $text-color;
  transition: all $global-transition;

  &:focus, &:hover {
    background-color: lighten($bg-color, 10);
    color: lighten($text-color, 10);
  }
}

@import "~inuitcss/settings/settings.core";
@import "~inuitcss/tools/tools.font-size";
@import "~bourbon-neat/core/neat";
@import "src/css/settings/_global.scss";
@import "src/css/settings/_colors.scss";
@import "src/css/settings/_grid.scss";

.base {
  @include grid-collapse;
}

.field {
  margin-bottom: $inuit-global-spacing-unit;
  font-weight: bold;
}

.invalid {
  border: 1px solid $error-color;
  box-shadow: 0 0 5px rgba($error-color, .4);
}

.userField {
  composes: field;
  @include grid-column;

  @include grid-media($neat-grid) {
    @include grid-column(1 of 2);
  }
}

.messageField {
  composes: field;
  @include grid-column;
}

.submit {
  @include grid-column;
}

.send {
  $bg-color: $link-color;
  $color: #fff;

  background-color: $bg-color;
  color: $color;
  transition: all $global-transition;

  &:focus, &:hover {
    background-color: lighten($bg-color, 10);
  }
}

Use the same color scheme as links for the send button
Use the same color scheme as links for the send button
