%form-element > strong {
  @extend %with-error;
}
%form-element-error > input,
%form-element-error > textarea {
  border: $decor-border-100;
}
%form-element [type='text'],
%form-element [type='password'],
%form-element textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  box-shadow: inset 0 4px 1px rgba(0, 0, 0, 0.06);
  border-radius: $decor-radius-100;
  border: $decor-border-100;
}
%form-element [type='text']:focus,
%form-element [type='password']:focus,
%form-element textarea:focus {
  outline: none;
}
%form-element > em > code {
  border-radius: $decor-radius-100;
}
%form-element-error > input {
  border-color: $ui-color-failure !important;
}
%form-element > strong {
  color: $ui-color-failure;
}
%form-element > em {
  color: $ui-gray-400;
}
%form-element > em > code {
  background-color: $ui-gray-200;
  color: $brand-magenta-600;
  border-radius: $decor-radius-100;
}
%form-element > span {
  color: $ui-black;
}
%form-element [type='text'],
%form-element [type='password'],
%form-element textarea {
  color: $ui-gray-500;
}
%form-element [type='text'],
%form-element [type='password'],
%form-element textarea {
  border-color: $ui-gray-300;
}
%form-element [type='text']:hover,
%form-element [type='password']:hover,
%form-element textarea:hover {
  border-color: $ui-gray-500;
}
%form-element [type='text']:focus,
%form-element [type='password']:focus,
%form-element textarea:focus {
  border-color: $ui-blue-500;
}