.flash {
  display: block;
  margin-bottom: scale.$lg-2;
  padding: scale.$sm-1;
  border-radius: 2px;
  @include Typography.Interface(M);

  .flash-header {
    display: flex;
    align-items: center;
  }

  hr {
    background: none;
    margin: scale.$sm-1 0;
    border: none;
    border-bottom: 1px solid;
  }

  pre {
    margin-bottom: 0;
  }

  .icon {
    width: scale.$lg-1;
    height: scale.$lg-1;
    margin-right: scale.$sm-2;
  }

  &--success {
    color: rgb(var(--success-text));
    background: rgb(var(--success));
    border: 1px solid;
    border-color: rgb(var(--success-border));

    hr {
      border-color: rgb(var(--success-border));
    }
  }

  &--error {
    color: rgb(var(--error-text));
    background: rgb(var(--error));
    border: 1px solid;
    border-color: rgb(var(--error-border));

    hr {
      border-color: rgb(var(--error-border));
    }
  }
}
