: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;
}

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

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

video {
  display: none;
  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.visible {
  display: block;
}

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

:host([variant='gradient']) ::slotted(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) {
  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);
}

/* Mobile breakpoint */

/* Use mobile styling for portrait views */

@media (orientation: portrait) {
  :host {
    height: var(--dyte-space-44, 176px);
  }
}