:host {
  display: block;
  overflow: hidden;

  aspect-ratio: 1 / 1;

  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  display: block;
}

img,
ha-icon {
  // Safari will occasionally not load thumbnails correctly with display block.
  display: inline-block;

  // Ensure no whitespace around img with inline-block display.
  vertical-align: top;
  margin: 0;

  border-radius: var(
    --frigate-card-css-border-radius,
    var(--ha-card-border-radius, 4px)
  );

  max-width: var(--frigate-card-thumbnail-size);
  max-height: 100%;
  aspect-ratio: 1 / 1;

  // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
  // should be clipped to fill the thumbnail div whilst maintaining
  // aspect-ratio.
  object-fit: cover;
}

ha-icon {
  --mdc-icon-size: 50%;
  color: var(--primary-text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  opacity: 0.2;
}