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

  // Position control icons relative to the thumbnail, and `isolation: isolate`
  // to keep their `z-index` scoped here. Without a stacking context an
  // unhovered gallery tile (which has no `transform`) lets its feature icons'
  // z-index leak into the card's stacking context and paint over the `elements`
  // overlay.
  position: relative;
  isolation: isolate;
  overflow: hidden;

  transition: transform 0.2s linear;
}

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

:host([details]) {
  border: 1px solid var(--advanced-camera-card-thumbnail-border-color);
  border-radius: var(--advanced-camera-card-border-radius-final);
  padding: 2px;

  // Additional padding on the right to match the gap specified above.
  padding-right: 4px;

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

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

advanced-camera-card-thumbnail-details {
  flex: 1;
}