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


.dyte-select {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--dyte-colors-background-700, 44 44 44) / var(--tw-bg-opacity));
  color: rgb(var(--dyte-colors-text-1000, 255 255 255));
}


.dyte-select:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


.dyte-select {
  display: block;
  border-radius: var(--dyte-border-radius-sm, 4px);
  border-width: var(--dyte-border-width-none, 0);
  border-style: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: var(--dyte-space-3, 12px);
  font-size: 16px;

  --icon-size: var(--dyte-select-chevron-size, var(--dyte-space-6, 24px));
  --icon-right-position: var(--dyte-select-chevron-right-position, var(--dyte-space-2, 8px));

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--icon-right-position) center;
  background-repeat: no-repeat;
  background-size: var(--icon-size) var(--icon-size);
  padding-right: calc(var(--icon-right-position) * 5);
}


:host {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.dyte-select {
  width: 100%;
  text-overflow: ellipsis;
}

dyte-participant-tile {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--dyte-space-4, 16px);
  max-width: 100%;
}

#icon {
  padding-bottom: var(--dyte-space-1, 4px);
}

.apply-button {
  height: var(--dyte-space-10, 40px);
}

label {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 14px;
}

.group {
  margin-top: var(--dyte-space-2, 8px);
  margin-bottom: var(--dyte-space-2, 8px);
}

.group > * {
  margin-bottom: var(--dyte-space-2, 8px);
}

.group > *:last-child {
  margin-bottom: var(--dyte-space-0, 0px);
}

.group select {
  flex: 1 1 0%;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dyte-space-3, 12px);
}

.section {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-height: 480px) and (orientation: landscape) {
  :host {
    flex-direction: row;
  }

  :host([size='sm']) {
    flex-direction: row;
  }

  .section[part='tile-preview'] {
    margin-left: var(--dyte-space-2, 8px);
    margin-right: var(--dyte-space-2, 8px);
    max-height: 90%;
    max-width: 40%;
    flex-shrink: 1;
  }

  .section[part='video-settings'] {
    margin-left: var(--dyte-space-2, 8px);
    margin-right: var(--dyte-space-2, 8px);
    flex-grow: 1;
  }
}