:host {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;

  // Ensure control icons are relative to the thumbnail.
  position: relative;
  overflow: hidden;

  transition: transform 0.2s linear;
}

:host(:not([details])) {
  aspect-ratio: 1 / 1;
}

:host([details]) {
  border: 1px solid var(--frigate-card-thumbnail-border-color);
  border-radius: var(
    --frigate-card-css-border-radius,
    var(--ha-card-border-radius, 4px)
  );
  padding: 2px;

  // When details are enabled, use a background color so that the details have
  // contrast with the background.
  background-color: var(--frigate-card-thumbnail-background);
}

:host(:hover) {
  transform: scale(1.04);
}

frigate-card-icon {
  position: absolute;
  border-radius: 50%;
  color: var(--frigate-card-thumbnail-icon-color);

  cursor: pointer;

  transition:
    opacity 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
frigate-card-icon:hover {
  opacity: 1;
}

frigate-card-icon.star {
  top: 3px;
  left: 3px;
}
frigate-card-icon.star.starred {
  color: var(--frigate-card-thumbnail-icon-favorite-color);
}

frigate-card-icon.timeline {
  top: 3px;
  right: 3px;
}

frigate-card-icon.download {
  right: 3px;
  bottom: 3px;
}

frigate-card-thumbnail-details-event,
frigate-card-thumbnail-details-recording {
  flex: 1;
}