:host {
  width: 100%;
  height: 100%;
  display: block;
  overflow: auto;

  // Hide scrollbar: IE and Edge
  -ms-overflow-style: none;

  // Hide scrollbar: Firefox
  scrollbar-width: none;

  --frigate-card-gallery-gap: 3px;
  --frigate-card-gallery-columns: 4;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: var(--frigate-card-gallery-gap);
}

// Hide scrollbar for Chrome, Safari and Opera
:host::-webkit-scrollbar {
  display: none;
}

frigate-card-thumbnail {
  height: 100%;
  max-height: var(--frigate-card-thumbnail-size);
}
frigate-card-thumbnail:not([details]) {
  width: 100%;
}
frigate-card-thumbnail.selected {
  border: 4px solid var(--accent-color);
  // Because this is box-sizing: border-box, the border is effectively
  // 'padding'. To get the curved borders to line up between the thumbnail and
  // this outer border, we need to add the size of the border to the thumbnail
  // image border radius.
  // Related: https://www.30secondsofcode.org/articles/s/css-nested-border-radius
  border-radius: calc(
    var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px)) + 4px
  );
}

frigate-card-progress-indicator.top {
  // The top loading progress indicator should span the whole width.
  grid-column: 1/-1;
}