@use 'sass:math';

@use '../../tools/colors';

@use '../config/border-radius.scss';
@use '../config/speed.scss';
@use '../config/variables.scss';

.error {
  background: colors.$red;
  border-radius: border-radius.$border-radius--small;
  color: #fff;
  padding: math.div(variables.$form--element--padding--x * 2, 3) variables.$form--element--padding--x;
  transition: opacity speed.$speed--x-fast;

  &--is-loading {
    opacity: 0.25;
  }

  .inverse & {
    color: #fff;
    border: none;
    background: colors.$red;
  }
}
