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


/**
 * NOTE(vaibhavshn):
 * The code for visibility and display below are set after careful consideration
 * as the .hydrated class overrides the visibility properly.
 * Thus the background overlay would be visible, even in closed state
 */

:host {
  position: fixed;
  top: var(--dyte-space-0, 0px);
  right: var(--dyte-space-0, 0px);
  bottom: var(--dyte-space-0, 0px);
  left: var(--dyte-space-0, 0px);
  box-sizing: border-box;
  padding: var(--dyte-space-4, 16px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--dyte-colors-background-600, 60 60 60) / 0.5);
  color: rgb(var(--dyte-colors-text-1000, 255 255 255));
  /* Hide dialog by default */
  visibility: hidden;
  display: none;
  overflow-wrap: break-word;
  word-wrap: break-word;

  z-index: 60;

  -webkit-backdrop-filter: blur(12px) saturate(180%);

          backdrop-filter: blur(12px) saturate(180%);
}

#dialog {
  position: relative;
  max-height: 100%;
  max-width: 100%;
}

#dismiss-btn {
  position: absolute;
  top: var(--dyte-space-3, 12px);
  right: var(--dyte-space-3, 12px);
  z-index: 50;
}

::slotted(*) {
  max-height: 100%;
  max-width: 100%;
}

/* Show only when open="true" */
:host([open]) {
  visibility: visible;
  display: flex;
}

/* Hide dialog by default */
:host([open='false']) {
  visibility: hidden;
  display: none;
}