:host {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

  max-width: var(--advanced-camera-card-thumbnail-size);
  max-height: var(--advanced-camera-card-thumbnail-size);

  aspect-ratio: 1 / 1;

  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-background-color);
  border-radius: var(
    --advanced-camera-card-css-border-radius,
    var(--ha-card-border-radius, 4px)
  );

  box-sizing: border-box;

  // Background icon relative to the thumbnail.
  position: relative;
}

advanced-camera-card-thumbnail-feature-thumbnail {
  height: 50%;
}
advanced-camera-card-thumbnail-feature-thumbnail.brand:only-child {
  height: 60%;
}
advanced-camera-card-thumbnail-feature-thumbnail:not(.brand):only-child {
  height: 100%;
}

advanced-camera-card-icon:only-child {
  width: 60%;
  height: 60%;

  --mdc-icon-size: 100%;
}

advanced-camera-card-icon.background {
  display: block;
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  padding: 10%;
  box-sizing: border-box;

  pointer-events: none;

  opacity: 0.1;

  --mdc-icon-size: 100%;
}

div {
  text-align: center;
  color: var(--primary-text-color);
}
div.title {
  font-size: 1.5rem;
}
div.subtitle {
  font-size: 0.8em;
}