@import "../../themes/native/native.globals";

// Thumbnail
// --------------------------------------------------

:host {
  /**
   * @prop --border-radius: Border radius of the thumbnail
   * @prop --size: Size of the thumbnail
   */
  --size: 48px; // TODO(FW-6862): separate width and height tokens for thumbnails
  --border-radius: 0;

  @include border-radius(var(--border-radius));

  display: block;

  width: var(--size, 48px);
  height: var(--size, 48px);
}

::slotted(ion-img),
::slotted(img) {
  @include border-radius(var(--border-radius));

  width: 100%;
  height: 100%;

  object-fit: cover;
  overflow: hidden;
}