// Custom forms built with the Forms plugin

$forms-label-color: $forms-label-color;
$forms-control-focused-border-color: $forms-control-focused-border-color;
$forms-error-color: $forms-error-color;
$forms-btn-background-color: $forms-btn-background-color;

form .row {
  @include flex;
  flex-direction: row;
}

form .row > div {
  padding: 0 0.8em;
  flex: 1;
}

form > .form-group {
  padding: 0 0.8em;
}

.form-group {
  margin-bottom: 18px;
}

.control-label {
  color: $forms-label-color;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 10px;
  font-weight: 700;
}

div.input {
  @include flex;
  flex-direction: column;
}

.form-control {
  height: 28px;
  box-sizing: content-box;

  padding: 6px 12px;

  font-size: 14px;
  line-height: 1.2em;
  color: #555;

  background-color: #fff;

  border: 1px solid #ccc;
  border-radius: 4px;
}

textarea.form-control {
  padding: 12px 12px;
  height: 180px;
}

.form-control:focus {
  border: 2px solid $forms-control-focused-border-color;
}

.form-control:invalid {
  box-shadow: none;
}

div.input .error {
  color: $forms-error-color;
}

div.input span.error {
  margin-top: 5px;
}

span.submit {
  @include flex;
  flex-direction: row;
  justify-content: flex-end;
}

form button[type=submit] {
  min-width: 120px;
  background-color: $forms-btn-background-color;
  color: #000000;
}

form button[type=submit]:hover {
  background-color: lighten($forms-btn-background-color, 15);
  cursor: pointer;
}

::-webkit-input-placeholder {
  color: #8c8c8c !important;
  opacity: 1.0;
}
:-moz-placeholder {
  color: #8c8c8c !important;
  opacity: 1.0;
}
::-moz-placeholder {
  color: #8c8c8c !important;
  opacity: 1.0;
}
:-ms-input-placeholder {
  color: #8c8c8c !important;
  opacity: 1.0;
}
