:host {
  line-height: initial;
  font-family: var(--dyte-font-family, sans-serif);

  font-feature-settings: normal;
  font-variation-settings: normal;
}

p {
  margin: var(--dyte-space-0, 0px);
  padding: var(--dyte-space-0, 0px);
}


:host {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  height: var(--dyte-space-56, 224px);
  overflow: hidden;
  border-radius: var(--dyte-border-radius-lg, 12px);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --tw-bg-opacity: 1;
  background-color: rgba(var(--dyte-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));

  transition-property: var(--dyte-transition-property, all);
  transition-duration: 150ms;
  container-type: inline-size;
  container-name: participanttile;
}

@media (prefers-reduced-motion) {
  /* No transitions when disabled */
  :host {
    --dyte-transition-property: none;
  }
}

dyte-avatar {
  z-index: -1;
}

/**
  NOTE: provided :slotted(dyte-name-tag) & dyte-name-tag separately
  because ::slotted isn't applied on default slots.
*/

::slotted(dyte-name-tag), 
dyte-name-tag {
  position: absolute;
  left: var(--dyte-space-3, 12px);
  bottom: var(--dyte-space-3, 12px);
}

:host([size='sm'][variant='solid']) ::slotted(dyte-name-tag), 
  :host([size='sm'][variant='solid']) dyte-name-tag {
  left: var(--dyte-space-2, 8px);
  bottom: var(--dyte-space-2, 8px);
  height: var(--dyte-space-4, 16px);
}

::slotted(dyte-network-indicator), 
dyte-network-indicator {
  position: absolute;
  right: var(--dyte-space-3, 12px);
  bottom: var(--dyte-space-3, 12px);
}

:host([size='sm']) ::slotted(dyte-network-indicator), 
  :host([size='sm']) dyte-network-indicator {
  right: var(--dyte-space-2, 8px);
  bottom: var(--dyte-space-2, 8px);
}

video {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: var(--dyte-border-radius-lg, 12px);
}

video.contain {
  -o-object-fit: contain;
     object-fit: contain;
}

video.cover {
  -o-object-fit: cover;
     object-fit: cover;
}

video::-webkit-media-controls {
  display: none !important;
}

.pinned-icon {
  position: absolute;
  left: var(--dyte-space-3, 12px);
  top: var(--dyte-space-3, 12px);
  height: var(--dyte-space-5, 20px);
  width: var(--dyte-space-5, 20px);
  padding: var(--dyte-space-1, 4px);
  border-radius: var(--dyte-border-radius-md, 8px);
  --tw-bg-opacity: 1;
  background-color: rgba(var(--dyte-colors-background-700, 44 44 44) / var(--tw-bg-opacity));
}

.network-container {
  position: absolute;
  right: var(--dyte-space-3, 12px);
  bottom: var(--dyte-space-3, 12px);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--dyte-space-2, 8px);
  font-size: 12px;
  border-radius: var(--dyte-border-radius-md, 8px);
  --tw-bg-opacity: 1;
  background-color: rgba(var(--dyte-colors-background-700, 44 44 44) / var(--tw-bg-opacity));
}
.network-icon {
  height: var(--dyte-space-5, 20px);
  width: var(--dyte-space-5, 20px);
  --tw-text-opacity: 1;
  color: rgba(var(--dyte-colors-danger, 255 45 45) / var(--tw-text-opacity));
}

:host([size='sm']) .pinned-icon {
  top: var(--dyte-space-2, 8px);
  left: var(--dyte-space-2, 8px);
}

:host([variant='gradient']) ::slotted(dyte-audio-visualizer), 
  :host([variant='gradient']) dyte-audio-visualizer {
  position: absolute;
  top: var(--dyte-space-2, 8px);
  right: var(--dyte-space-2, 8px);
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgba(var(--dyte-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
  padding: var(--dyte-space-2, 8px);
}

:host([variant='gradient']) ::slotted(dyte-name-tag), 
  :host([variant='gradient']) dyte-name-tag {
  bottom: var(--dyte-space-0, 0px);
  left: var(--dyte-space-0, 0px);
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: transparent;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--dyte-colors-background-1000, 8 8 8));
  --tw-gradient-to: rgba(var(--dyte-colors-background-1000, 8 8 8) / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: transparent;
}

video.mirror {
  transform: scaleX(-1);
}

/** Name tag positions */

:host([name-tag-position='bottom-right']) ::slotted(dyte-name-tag), 
  :host([name-tag-position='bottom-right']) dyte-name-tag {
  left: auto;
  right: var(--dyte-space-3, 12px);
}

:host([name-tag-position='bottom-center']) ::slotted(dyte-name-tag), 
  :host([name-tag-position='bottom-center']) dyte-name-tag {
  left: auto;
  right: auto;
}

:host([name-tag-position='top-left']) ::slotted(dyte-name-tag), 
  :host([name-tag-position='top-left']) dyte-name-tag {
  top: var(--dyte-space-3, 12px);
  bottom: auto;
}

:host([name-tag-position='top-right']) ::slotted(dyte-name-tag), 
  :host([name-tag-position='top-right']) dyte-name-tag {
  top: var(--dyte-space-3, 12px);
  right: var(--dyte-space-3, 12px);
  left: auto;
  bottom: auto;
}

:host([name-tag-position='top-center']) ::slotted(dyte-name-tag), 
  :host([name-tag-position='top-center']) dyte-name-tag {
  left: auto;
  right: auto;
  bottom: auto;
  top: var(--dyte-space-3, 12px);
}

@media only screen and (max-height: 480px) and (orientation: landscape) {
  :host([size='sm']) {
    border-radius: var(--dyte-border-radius-sm, 4px);
  }

  :host([size='sm']) > video {
    border-radius: var(--dyte-border-radius-sm, 4px);
  }

  ::slotted(dyte-avatar), 
  dyte-avatar {
    height: var(--dyte-space-12, 48px);
    width: var(--dyte-space-12, 48px);
  }
    :host([size='sm'][variant='solid']) ::slotted(dyte-name-tag),
    :host([size='sm'][variant='solid']) dyte-name-tag {
      transform-origin: -2% 100%;
      transform: scale(0.6);
      z-index: 10;
      left: var(--dyte-space-0, 0px);
      bottom: var(--dyte-space-0, 0px);
      border-radius: var(--dyte-border-radius-none, 0);
    }
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
  :host([size='sm']) {
    border-radius: var(--dyte-border-radius-sm, 4px);
  }

  :host([size='sm']) > video {
    border-radius: var(--dyte-border-radius-sm, 4px);
  }

  ::slotted(dyte-avatar), 
  dyte-avatar {
    height: var(--dyte-space-12, 48px);
    width: var(--dyte-space-12, 48px);
  }
    :host([size='sm'][variant='solid']) ::slotted(dyte-name-tag),
    :host([size='sm'][variant='solid']) dyte-name-tag {
      transform-origin: -5% 110%;
      transform: scale(0.6);
      z-index: 10;
      left: var(--dyte-space-0, 0px);
      bottom: var(--dyte-space-0, 0px);
      border-radius: var(--dyte-border-radius-none, 0);
    }
}

@container participanttile (max-width: 300px) {
  ::slotted(dyte-name-tag),
  dyte-name-tag {
    transform-origin: 0 100%;
    transform: scale(0.8);
  }

  ::slotted(dyte-avatar), 
  dyte-avatar {
    height: var(--dyte-space-8, 32px) !important;
    width: var(--dyte-space-8, 32px) !important;
  }
}

@container participanttile (max-width: 150px) {
  ::slotted(dyte-name-tag),
  dyte-name-tag[variant='solid'] {
    transform-origin: -10% 130%;
    transform: scale(0.6);
    z-index: 10;
    border-radius: 9999px;
  }

  ::slotted(dyte-avatar), 
  dyte-avatar {
    height: 6 !important;
    width: 6 !important;
  }
}