@govbr-ds/core/dist/components/message/message.css

Padrão Digital de Governo

.br-message {
  --message-background: var(--background);
  --message-color-icon: var(--color);
  --feedback-background: var(--background);
  --message-text: var(--color);
  background: var(--message-background);
  display: flex;
  margin-bottom: var(--spacing-scale-2x);
}
.br-message .content {
  color: var(--message-text);
  flex: 1;
  font-size: var(--font-size-scale-up-01);
  padding: var(--spacing-scale-3x) var(--spacing-scale-base) var(--spacing-scale-3x) var(--spacing-scale-2x);
}
.br-message .content .message-title {
  font-weight: var(--font-weight-semi-bold);
}
.br-message .content .message-body {
  font-weight: var(--font-weigth-regular);
}
.br-message .content a {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}
.br-message .content *:last-child {
  margin-bottom: 0;
}
.br-message .icon {
  align-items: center;
  color: var(--message-color-icon);
  display: flex;
  justify-content: center;
  margin: var(--spacing-vertical-center) var(--spacing-scale-2x);
  padding-left: var(--spacing-scale-2x);
  padding-right: var(--spacing-scale-2x);
}
.br-message .icon + .content {
  padding-left: 0;
}
.br-message .close {
  margin-right: var(--spacing-scale-base);
  margin-top: var(--spacing-scale-base);
}
.br-message.is-success, .br-message.success, .br-message[success] {
  --message-background: var(--success-alternative);
  --feedback-background: var(--success);
  --message-color-icon: var(--success);
}
.br-message.is-success .close .br-button, .br-message.success .close .br-button, .br-message[success] .close .br-button {
  --interactive: var(--message-color-icon);
  --interactive-rgb: var(--success-rgb);
}
.br-message.is-danger, .br-message.danger, .br-message[danger] {
  --message-background: var(--danger-alternative);
  --feedback-background: var(--danger);
  --message-color-icon: var(--danger);
}
.br-message.is-danger .close .br-button, .br-message.danger .close .br-button, .br-message[danger] .close .br-button {
  --interactive: var(--message-color-icon);
  --interactive-rgb: var(--danger-rgb);
}
.br-message.is-info, .br-message.info, .br-message[info] {
  --message-background: var(--info-alternative);
  --feedback-background: var(--info);
  --message-color-icon: var(--info);
}
.br-message.is-info .close .br-button, .br-message.info .close .br-button, .br-message[info] .close .br-button {
  --interactive: var(--message-color-icon);
  --interactive-rgb: var(--info-rgb);
}
.br-message.is-warning, .br-message.warning, .br-message[warning] {
  --message-background: var(--warning-alternative);
  --feedback-background: var(--warning);
}
.br-message.is-warning .close .br-button, .br-message.warning .close .br-button, .br-message[warning] .close .br-button {
  --interactive: var(--color);
  --interactive-rgb: var(--color-rgb);
}

.feedback {
  --message-background: var(--background);
  --message-color-icon: var(--color);
  --feedback-background: var(--background);
  --message-text: var(--color);
  align-items: center;
  background: var(--feedback-background);
  color: var(--message-text);
  display: inline-flex;
  font-style: italic;
  font-weight: var(--font-weight-medium);
  margin-bottom: 0;
  padding: var(--spacing-scale-half);
}
.feedback .svg-inline--fa,
.feedback .fa,
.feedback .fab,
.feedback .fad,
.feedback .fal,
.feedback .far,
.feedback .fas {
  margin-right: var(--spacing-scale-half);
}
.feedback:not(.is-warning):not(.warning):not([warning]) {
  --message-text: var(--pure-0);
}
.feedback.is-warning, .feedback.warning, .feedback[warning] {
  --color: var(--color-light);
  --color-rgb: var(--color-light-rgb);
  --text-color: var(--color-light);
  --interactive: var(--interactive-light);
  --interactive-rgb: var(--interactive-light-rgb);
  --visited: var(--visited-light);
  --hover: var(--hover-light);
  --pressed: var(--pressed-light);
  --focus-color: var(--focus-color-light);
  --focus: var(--focus-color-light);
}
.feedback.is-success, .feedback.success, .feedback[success] {
  --message-background: var(--success-alternative);
  --feedback-background: var(--success);
  --message-color-icon: var(--success);
}
.feedback.is-success .close .br-button, .feedback.success .close .br-button, .feedback[success] .close .br-button {
  --interactive: var(--message-color-icon);
  --interactive-rgb: var(--success-rgb);
}
.feedback.is-danger, .feedback.danger, .feedback[danger] {
  --message-background: var(--danger-alternative);
  --feedback-background: var(--danger);
  --message-color-icon: var(--danger);
}
.feedback.is-danger .close .br-button, .feedback.danger .close .br-button, .feedback[danger] .close .br-button {
  --interactive: var(--message-color-icon);
  --interactive-rgb: var(--danger-rgb);
}
.feedback.is-info, .feedback.info, .feedback[info] {
  --message-background: var(--info-alternative);
  --feedback-background: var(--info);
  --message-color-icon: var(--info);
}
.feedback.is-info .close .br-button, .feedback.info .close .br-button, .feedback[info] .close .br-button {
  --interactive: var(--message-color-icon);
  --interactive-rgb: var(--info-rgb);
}
.feedback.is-warning, .feedback.warning, .feedback[warning] {
  --message-background: var(--warning-alternative);
  --feedback-background: var(--warning);
}
.feedback.is-warning .close .br-button, .feedback.warning .close .br-button, .feedback[warning] .close .br-button {
  --interactive: var(--color);
  --interactive-rgb: var(--color-rgb);
}

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