.br-message {
  --message-color: var(--color-secondary-08);
  --message-color-rgb: var(--rgb-secondary-08);
  --message-text: var(--color-secondary-08);
  --message-opacity: var(--surface-opacity-xs);
  --message-font-size: var(--font-size-scale-up-01);
  --message-padding: var(--spacing-scale-3x) var(--spacing-scale-base)
    var(--spacing-scale-3x) var(--spacing-scale-2x);
  --message-margin: var(--spacing-scale-2x);
  --message-icon: var(--icon-size-lg);
  --feedback-padding: var(--spacing-scale-half);
  --feedback-font-weight: var(--font-weight-medium);
  background: rgba(var(--message-color-rgb), var(--message-opacity));
  display: flex;
  margin-bottom: var(--message-margin);
}
.br-message .content {
  color: var(--message-text);
  flex: 1;
  font-size: var(--message-font-size);
  padding: var(--message-padding);
}
.br-message .content a {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}
.br-message .content *:last-child {
  margin-bottom: 0;
}
.br-message .icon {
  color: var(--message-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--spacing-scale-2x);
  padding-right: var(--spacing-scale-2x);
}
.br-message .icon + .content {
  padding-left: 0;
}
.br-message .close {
  margin-top: var(--spacing-scale-base);
  margin-right: var(--spacing-scale-base);
}
.br-message.is-success, .br-message.success, .br-message[success] {
  --message-color: var(--color-success);
  --message-color-rgb: var(--rgb-success);
}
.br-message.is-success .close, .br-message.success .close, .br-message[success] .close {
  --interactive: var(--color-success);
  --interactive-rgb: var(--rgb-success);
}
.br-message.is-danger, .br-message.danger, .br-message[danger] {
  --message-color: var(--color-danger);
  --message-color-rgb: var(--rgb-danger);
}
.br-message.is-danger .close, .br-message.danger .close, .br-message[danger] .close {
  --interactive: var(--color-danger);
  --interactive-rgb: var(--rgb-danger);
}
.br-message.is-info, .br-message.info, .br-message[info] {
  --message-color: var(--color-info);
  --message-color-rgb: var(--rgb-info);
}
.br-message.is-info .close, .br-message.info .close, .br-message[info] .close {
  --interactive: var(--color-info);
  --interactive-rgb: var(--rgb-info);
}
.br-message.is-warning, .br-message.warning, .br-message[warning] {
  --message-color: var(--message-text);
  --message-color-rgb: var(--rgb-warning);
}
.br-message.is-warning .close, .br-message.warning .close, .br-message[warning] .close {
  --interactive: var(--color-secondary-08);
  --interactive-rgb: var(--rgb-secondary-08);
}
.br-message.inverted {
  --text-color: var(--color-secondary-01);
  --interactive: var(--color-primary-pastel-01);
  --interactive-rgb: var(--rgb-primary-pastel-01);
  --visited: var(--color-secondary-04);
  --hover: var(--surface-opacity-sm, 0.3);
  --pressed: var(--surface-opacity-lg, 0.65);
  --focus-color: var(--color-support-10);
  --active: var(--color-secondary-01);
  --message-opacity: 1;
}
.br-message.inverted .icon {
  --message-color: var(--message-text);
}
.br-message.inverted:not(.is-warning):not(.warning):not([warning]) {
  --message-text: var(--color-secondary-01);
}
.br-message.inverted:not(.is-warning):not(.warning):not([warning]) .close {
  --interactive: var(--color-secondary-01);
  --interactive-rgb: var(--rgb-secondary-01);
}

.feedback {
  --message-color: var(--color-secondary-08);
  --message-color-rgb: var(--rgb-secondary-08);
  --message-text: var(--color-secondary-08);
  --message-opacity: var(--surface-opacity-xs);
  --message-font-size: var(--font-size-scale-up-01);
  --message-padding: var(--spacing-scale-3x) var(--spacing-scale-base)
    var(--spacing-scale-3x) var(--spacing-scale-2x);
  --message-margin: var(--spacing-scale-2x);
  --message-icon: var(--icon-size-lg);
  --feedback-padding: var(--spacing-scale-half);
  --feedback-font-weight: var(--font-weight-medium);
  --message-opacity: 1;
  background: rgba(var(--message-color-rgb), var(--message-opacity));
  color: var(--message-text);
  font-weight: var(--feedback-font-weight);
  font-style: italic;
  display: inline-block;
  margin-bottom: 0;
  padding: var(--feedback-padding);
}
.feedback:not(.is-warning):not(.warning):not([warning]) {
  --message-text: var(--color-secondary-01);
}
.feedback .svg-inline--fa,
.feedback .fa,
.feedback .fab,
.feedback .fad,
.feedback .fal,
.feedback .far,
.feedback .fas {
  margin-right: var(--feedback-padding);
}
.feedback.is-success, .feedback.success, .feedback[success] {
  --message-color: var(--color-success);
  --message-color-rgb: var(--rgb-success);
}
.feedback.is-success .close, .feedback.success .close, .feedback[success] .close {
  --interactive: var(--color-success);
  --interactive-rgb: var(--rgb-success);
}
.feedback.is-danger, .feedback.danger, .feedback[danger] {
  --message-color: var(--color-danger);
  --message-color-rgb: var(--rgb-danger);
}
.feedback.is-danger .close, .feedback.danger .close, .feedback[danger] .close {
  --interactive: var(--color-danger);
  --interactive-rgb: var(--rgb-danger);
}
.feedback.is-info, .feedback.info, .feedback[info] {
  --message-color: var(--color-info);
  --message-color-rgb: var(--rgb-info);
}
.feedback.is-info .close, .feedback.info .close, .feedback[info] .close {
  --interactive: var(--color-info);
  --interactive-rgb: var(--rgb-info);
}
.feedback.is-warning, .feedback.warning, .feedback[warning] {
  --message-color: var(--message-text);
  --message-color-rgb: var(--rgb-warning);
}
.feedback.is-warning .close, .feedback.warning .close, .feedback[warning] .close {
  --interactive: var(--color-secondary-08);
  --interactive-rgb: var(--rgb-secondary-08);
}
.feedback.inverted {
  --text-color: var(--color-secondary-01);
  --interactive: var(--color-primary-pastel-01);
  --interactive-rgb: var(--rgb-primary-pastel-01);
  --visited: var(--color-secondary-04);
  --hover: var(--surface-opacity-sm, 0.3);
  --pressed: var(--surface-opacity-lg, 0.65);
  --focus-color: var(--color-support-10);
  --active: var(--color-secondary-01);
  --message-opacity: 1;
}
.feedback.inverted .icon {
  --message-color: var(--message-text);
}
.feedback.inverted:not(.is-warning):not(.warning):not([warning]) {
  --message-text: var(--color-secondary-01);
}
.feedback.inverted:not(.is-warning):not(.warning):not([warning]) .close {
  --interactive: var(--color-secondary-01);
  --interactive-rgb: var(--rgb-secondary-01);
}

/*# sourceMappingURL=message.css.map*/