.Thumbnail {
  position: relative;
  width: em(64px);
  height: 100%;
}

.aspectRatioLandscape {
  width: calc(em(64px) / var(--x-thumbnail-aspect-ratio));

  & > .Image,
  & > .Placeholder {
    width: calc(em(64px) / var(--x-thumbnail-aspect-ratio));
  }
}

.aspectRatioPortrait {
  height: calc(em(64px) * var(--x-thumbnail-aspect-ratio));

  & > .Image,
  & > .Placeholder {
    height: calc(em(64px) * var(--x-thumbnail-aspect-ratio));
  }
}

.Image,
.Placeholder {
  width: em(64px);
  height: em(64px);
  border-radius: calc(var(--x-global-border-radius) * 1.6);
}

.sizeSmall {
  width: em(35px);

  & > .Image,
  & > .Placeholder {
    width: em(35px);
    height: em(35px);
  }

  /* stylelint-disable selector-max-class */
  &.aspectRatioLandscape {
    width: calc(em(35px) / var(--x-thumbnail-aspect-ratio));

    & > .Image,
    & > .Placeholder {
      width: calc(em(35px) / var(--x-thumbnail-aspect-ratio));
    }
  }

  &.aspectRatioPortrait {
    height: calc(em(35px) * var(--x-thumbnail-aspect-ratio));

    & > .Image,
    & > .Placeholder {
      height: calc(em(35px) * var(--x-thumbnail-aspect-ratio));
    }
  }
  /* stylelint-enable selector-max-class */

  & .Icon {
    display: block;
    width: em(18px);
    height: em(18px);
  }

  & .Badge {
    font-size: var(--x-typography-size-extra-small);
  }
}

.Image {
  display: block;
  object-fit: contain;
  background-color: var(--color--white);
}

.Placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color--lightest-grey);
  color: var(--color--light-grey);
}

.Icon {
  display: block;
  width: em(33px);
  height: em(33px);
}

.borderFull {
  & > .Image,
  & > .Placeholder {
    border: 1px solid var(--x-default-color-border);
  }
}

.Badge {
  --size: em(24px);
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(25%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size);
  height: var(--size);
  padding: 0 var(--x-spacing-tight3x);
  border-radius: calc(var(--size) / 2);
  font-size: var(--x-typography-size-small);
  font-weight: var(--x-typography-primary-weight-bold);
  line-height: var(--x-global-typography-line-size-small);
}

.Badge-backgroundSubdued {
  background-color: hsla(0, 0%, 45%, 90%);
  color: var(--color--white);
}

.Badge-backgroundPrimary {
  background-color: var(--x-color-primary-action);
  color: var(--x-color-primary-action-text);
}