.wrapper {
  position: absolute;
  transform: translate(var(--x), var(--y)) scale(1);

  width: var(--width);
  height: var(--height);

  opacity: 1;
}

.hidden {
  transform: translate(var(--x), var(--y)) scale(0.6);
  opacity: 0;
}

.noAnimate {
  transition: none;
}

.root {
  user-select: none;

  position: relative;

  display: flex;

  width: 100%;
  height: 100%;
  border-radius: 0.625rem;

  &::before {
    content: '';

    position: absolute;
    inset: -0.125rem;
    transform: scale(0.96);

    display: block;

    border-radius: 0.75rem;

    background: var(--gradient-speaking);

    transition: 0.25s ease-in-out transform;
  }

  &::after {
    content: '';

    position: absolute;
    z-index: 2;
    inset: 0;

    display: block;

    border-radius: 0.625rem;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55.62%, rgba(0, 0, 0, 0.5) 86.46%);
  }

  &.speaking::before {
    transform: scale(1);
  }
}

.loader {
  position: absolute;
}

.video {
  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;
  border-radius: 0.625rem;

  object-fit: contain;
}

.videoFallback {
  composes: video;
  position: absolute;
  z-index: 1;
  height: 100%;
}

.thumbnailWrapper {
  position: absolute;
  z-index: 0;

  overflow: hidden;

  width: 100%;
  height: 100%;
  border-radius: 0.625rem;

  background: #000;
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flipped {
  transform: scaleX(-1);
}

.pinButton {
  position: absolute;
  z-index: 3;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.25rem;

  color: #FFFFFF !important;
}

.bottomPanel {
  position: absolute;
  z-index: 3;
  inset-block-end: 0;
  inset-inline: 0;

  display: flex;
  gap: 0.25rem;
  align-items: center;

  padding: 0.5rem 0.75rem;
  border-end-start-radius: 0.625rem;
  border-end-end-radius: 0.625rem;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  min-width: 0;

  font-size: 1rem;
}

.pinned .bottomPanel, .pinned::after {
  opacity: 0;
  transition: 0.25s ease-in-out opacity;
}

.pinned:hover .bottomPanel, .pinned:hover::after {
  opacity: 1;
}

.name {
  font-weight: var(--font-weight-medium);
  line-height: 1.125rem;
  color: #FFFFFF;

  :global(.fullName) {
    --emoji-size: 1rem;

    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.status {
  line-height: 1.125rem;
  color: #FFFFFF;
  opacity: 0.6;
}

.icon {
  margin-left: auto;
}
