: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 {
  display: flex;
  align-items: center;
  padding-left: var(--dyte-space-3, 12px);
  padding-right: var(--dyte-space-3, 12px);
  padding-top: var(--dyte-space-2, 8px);
  padding-bottom: var(--dyte-space-2, 8px);
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: rgb(var(--dyte-colors-text-1000, 255 255 255));
  font-size: 14px;
}

::slotted([slot='start']) {
  margin-right: var(--dyte-space-2, 8px);
}

::slotted([slot='end']) {
  margin-left: var(--dyte-space-2, 8px);
}

:host(:hover) {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--dyte-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
}

:host(.red) {
  --tw-text-opacity: 1;
  color: rgba(var(--dyte-colors-danger, 255 45 45) / var(--tw-text-opacity));
}