.bui-toast {
  --min-width: var(--bui-toast-min-width, 86px);
  --max-width: var(--bui-toast-max-width, 80%);
  --text-align: var(--bui-toast-text-align, center);
  --flex-direction: var(--bui-toast-flex-direction, column);
  --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
  --position-top: var(--bui-toast-position-top, 15%);
  --position-bottom: var(--bui-toast-position-bottom, 85%);
  --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
  --border-radius: var(--bui-toast-border-radius, var(--bui-shape-radius-default));
  --icon-margin: var(--bui-toast-icon-margin, 0 0 8px);
  --icon-font-size: var(--bui-toast-icon-font-size, 30px);
  position: fixed;
  left: 50%;
  z-index: var(--bui-z-index-toast);
  min-width: var(--min-width);
  max-width: var(--max-width);
  padding: var(--padding);
  font-size: var(--bui-text-size-1);
  color: var(--bui-color-white);
  border-radius: var(--border-radius);
  word-break: break-all;
  white-space: pre-wrap;
  background-color: var(--background-color);
  text-align: var(--text-align);
  font-family: var(--bui-font-family);
}
.bui-toast.bui-toast-allow-click {
  position: fixed;
  right: unset;
  bottom: unset;
}
.bui-toast-center {
  top: 50%;
  transform: translate(-50%, -50%);
}
.bui-toast-top {
  top: var(--position-top);
  transform: translate(-50%, calc(-1 * var(--position-top)));
}
.bui-toast-bottom {
  top: var(--position-bottom);
  transform: translate(-50%, calc(-1 * var(--position-bottom)));
}
.bui-toast-icon {
  display: flex;
  flex-direction: var(--flex-direction);
  align-items: center;
}
.bui-toast-icon .bui-svg-icon {
  margin: var(--icon-margin);
  font-size: var(--icon-font-size);
}