.control-error-notifier-container {
  --control-error-notifier-bottom-margin: 40px;
  position: fixed;
  bottom: var(--control-error-notifier-bottom-margin);
  left: calc(64px + 12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 8px 4px;
  max-width: 50ch;
  max-height: calc(40vh - 40px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  z-index: 99999999;
}
.control-error-notifier-container > div {
  display: flex;
}
.control-error-notifier-error {
  --control-error-notifier-border: lightgray;
  --control-error-notifier-bg: hsl(0deg 0% 100% / 90%);
  --control-error-notifier-text: #1a1a1a;
  margin: 0;
  padding: 8px;
  background: var(--control-error-notifier-bg);
  border: 1px solid var(--control-error-notifier-border);
  border-left: 4px solid var(--control-error-notifier-border);
  border-radius: 4px;
  box-shadow: 1px 1px 3px hsl(0deg 100% 50% / 5%);
  font-weight: 500;
  font-size: 12px;
  color: var(--control-error-notifier-text);
  overflow-wrap: anywhere;
}
.control-error-notifier-error.error {
  --control-error-notifier-border: red;
  --control-error-notifier-bg: hsl(356deg 100% 97% / 90%);
  --control-error-notifier-text: #a80404;
}
.control-error-notifier-error.warn {
  --control-error-notifier-border: #f5cc00;
  --control-error-notifier-bg: hsl(50deg 100% 95% / 90%);
  --control-error-notifier-text: #5c3c01;
}
.control-error-notifier-error strong {
  display: flex;
  align-items: center;
  gap: 4px;
}
.control-error-notifier-error span {
  font-size: 20px;
  line-height: 1;
}