.error {
  font-family:
    -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir,
    "Helvetica Neue", "Lucida Grande", sans-serif;
  border: 1px dashed var(--theme-colors-red-500, #e53e3e);
  width: 100%;
  padding: 4px;
  border-radius: 6px;
  position: relative;
}

.title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-colors-gray-800, #1a202c);
  margin: 0;
}
.message {
  font-size: 0.875rem;
  color: var(--theme-colors-gray-600, #4a5568);
  margin: 0;
  white-space: pre-wrap;
}
.button {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: var(--theme-colors-red-500, #e53e3e);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  border: none;
}
.button:hover {
  background-color: var(--theme-colors-red-600, #c53030);
}