.bui-alert {
  --content-marquee-speed: var(--bui-alert-content-marquee-speed, 10s);
  --padding: var(--bui-alert-padding, 8px);
  --line-height: var(--bui-alert-line-height, 16px);
  --default-icon-font-size: var(--bui-alert-default-icon-font-size, 15px);
  --action-margin-left: var(--bui-alert-action-margin-left, 16px);
  --icon-margin-right: var(--bui-alert-icon-margin-right, var(--bui-spacing-xs));
  --icon-font-size: var(--bui-alert-icon-font-size, var(--bui-title-size-4));
  display: flex;
  padding: var(--padding);
  border-radius: var(--bui-shape-radius-default);
  align-items: center;
  line-height: var(--line-height);
  font-size: var(--bui-text-size-3);
  font-family: var(--bui-font-family);
}
.bui-alert-standard-primary {
  background-color: var(--bui-color-primary-light);
  color: var(--bui-color-primary);
}
.bui-alert-standard-success {
  background-color: var(--bui-color-success-light);
  color: var(--bui-color-success);
}
.bui-alert-standard-info {
  background-color: var(--bui-color-info-light);
  color: var(--bui-color-info);
}
.bui-alert-standard-danger {
  background-color: var(--bui-color-danger-light);
  color: var(--bui-color-danger);
}
.bui-alert-standard-warning {
  color: var(--bui-color-warning);
  background-color: var(--bui-color-warning-light);
}
.bui-alert-outlined-primary {
  border: 1px solid var(--bui-color-primary);
  color: var(--bui-color-primary);
}
.bui-alert-outlined-success {
  border: 1px solid var(--bui-color-success);
  color: var(--bui-color-success);
}
.bui-alert-outlined-info {
  border: 1px solid var(--bui-color-info);
  color: var(--bui-color-info);
}
.bui-alert-outlined-danger {
  border: 1px solid var(--bui-color-danger);
  color: var(--bui-color-danger);
}
.bui-alert-outlined-warning {
  border: 1px solid var(--bui-color-warning);
  color: var(--bui-color-warning);
}
.bui-alert-default-icon {
  font-size: var(--default-icon-font-size);
}
.bui-alert-content {
  flex-grow: 1;
}
.bui-alert-action {
  flex-shrink: 0;
  margin-left: var(--action-margin-left);
  word-wrap: keep-all;
  font-size: var(--bui-text-size-3);
  cursor: pointer;
  text-align: center;
}
.bui-alert-action.bui-icon-btn {
  padding: 0;
}
.bui-alert-icon {
  display: flex;
  align-items: center;
  margin-right: var(--icon-margin-right);
  vertical-align: middle;
  font-size: var(--icon-font-size);
  cursor: pointer;
}
.bui-alert-marquee {
  overflow: hidden;
}
.bui-alert-marquee-content {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee var(--content-marquee-speed) linear infinite both;
}
@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}