// ##### ERROR #####
// =================

// BASE
// ----
.#{$n}-error {
  display: block;
  width: 100%;
  margin: 0;

  &:empty {
    display: none;
    margin: 0;
  }

  .#{$n}-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }

  .#{$n}-error__message {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: $spacer * 0.25;
    width: 100%;
    padding: $spacer * 0.25 $spacer * 0.5;
    border-radius: $borderradius-small;
    background-color: rgba($negative, 0.1);
    color: $negative-dark;
    font-size: $fontsize-small;
    font-weight: $fontweight-bold;
  }
}