:host {
  /**
   * @prop --width: Width of the image
   * @prop --height: Height of the image
   * @prop --border-radius: Border radius of the image
   * @prop --max-width: Maximum width of the image
   * @prop --max-height: Maximum height of the image
   * @prop --object-fit: CSS object-fit of the image
   */
  display: flex;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: inherit;
}

img,
div.error {
  border-radius: var(--border-radius);
  width: var(--width);
  height: var(--height);
  max-width: var(--max-width);
  max-height: var(--max-height);
  object-fit: var(--object-fit);
}

img {
  backdrop-filter: var(--blur-xl);
}

.error {
  display: flex;
  opacity: 0.8;
  background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);
  flex-direction: column;
  border: 1px solid red;
  color: black;
  align-items: center;
  justify-content: center;
  word-break: break-all;
  padding: 1rem;
  box-sizing: border-box;
}

.error sl-icon {
  color: #282828;
  font-size: calc(var(--width) / 2);
}

a.error {
  text-decoration: none;
  width: var(--width);
  height: var(--height);
}

.code {
  font-weight: bold;
  font-size: calc(var(--width) / 8);
}

.text {
  font-size: calc(var(--width) / 20);
}

sl-skeleton {
  --border-radius: inherit;
  width: var(--width);
  height: var(--height);
  max-width: var(--max-width);
  max-height: var(--max-height);
  aspect-ratio: 16 / 9;
}