$dialog-information-container-height: 800px;
$dialog-information-container-dialog-information-height: 64px;

.header-dialog-info,
.header-dialog-info * {
  box-sizing: border-box;
}
.header-dialog-info {
  padding: 16px 16px 16px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  font: var(--title-title-large);
  position: relative;
  border-bottom: 1px solid var(--divider);
  height: $dialog-information-container-dialog-information-height;

  .dialog-header__icon {
      svg {
        width: 24px;
        height: 24px;
        fill: var(--secondary-elements);
      }
    }
}
.header-dialog-info-icon {
  width: 24px;
  height: 24px;
  fill: var(--secondary-elements);
}

.header-dialog-info-headline {
  color: var(--main-text, #0b1b0f);
  text-align: left;
  font: var(--title-title-large);
  position: relative;
}


.dialog-information-profile,
.dialog-information-profile * {
  box-sizing: border-box;
}
.dialog-information-profile {
  padding: 24px 0px 24px 0px;
  align-self: stretch;
  flex-flow: column;
  flex-shrink: 0;
  height: 160px;
  position: relative;
  border-bottom: 1px solid var(--divider);
}
.dialog-information-profile-avatar {
  height: 80px;
  left: 140px;
  top: 24px;
}
.dialog-info-profile-avatar-default-icon {
  display: flex;
  justify-content: center;
}
.dialog-info-profile-avatar-ellipse {
  border-radius: 50%;
  position: absolute;
  height: 81px;
  width: 81px;
  top: 24px;
}
.dialog-info-profile-avatar-contents {
  position: absolute;
  right: 17.86%;
  left: 17.86%;
  width: 64.29%;
  bottom: 17.86%;
  top: 17.86%;
  height: 64.29%;
  overflow: visible;
}
.dialog-information-profile-dialog-name {
  color: var(--main-text, #0b1b0f);
  text-align: center;
  font: var(--title-title-medium);
  left: 134.5px;
  top: 112px;
  align-items: center;
  justify-content: center;
  margin: 8px 12px 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dialog-information-profile-edit {
  right: -10px;
  border-radius: 4px;
  padding: 8px 56px 0px 0px;
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
}
.dialog-information-profile-edit-button {
  color: var(--main-elements, #3978fc);
  text-align: left;
  font: var(--button-default);
  position: relative;

  &--disable {
    color: var(--disabled-elements);
    cursor: default;
  }
}

.dialog-info-action-wrapper-settings,
.dialog-info-action-wrapper-settings * {
  box-sizing: border-box;
}
.dialog-info-action-wrapper-settings {
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  border-bottom: 1px solid var(--divider);
}
@media only screen and (max-width: var(--min-width-screen-desktop)) {
  .dialog-info-action-wrapper-settings {
    padding: 6px;
  }
}
.no-padding {
  padding: 0;
}
.dialog-info-action-wrapper-settings-icon {
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
}
.dialog-info-action-wrapper-settings-subtitle {
  color: var(--main-text, #0b1b0f);
  text-align: left;
  font: var(--body-body-large);
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.dialog-info-action-wrapper-settings-contents {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}

.dialog-info-action-wrapper-settings-right {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  position: relative;
}
.dialog-info-action-wrapper-settings-right-badge {
  background: var(--disabled-elements, #bcc1c5);
  border-radius: 30px;
  padding: 2px 6px 2px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.dialog-info-action-wrapper-settings-right-badge-title {
  color: var(--color-background, #ffffff);
  text-align: center;
  font: var(--label-label-medium);
  position: relative;
  padding: 0 5px 0 5px;
}

.dialog-info-leave {
  fill: var(--error);
  border-bottom: 1px solid var(--divider);
  cursor: pointer;

   &--disable {
     fill: var(--disabled-elements);
     cursor: default;
   }
}

.dialog-info-members {
  fill: var(--main-elements);

  border-bottom: 1px solid var(--divider);
}

.dialog-info-action-wrapper-button {
  border: 1px solid var(--secondary-elements);
  color: var(--secondary-elements);

  &:active {
    border: 1px solid var(--secondary-elements);
    color: var(--secondary-elements);
  }

  &:focus {
    border: 1px solid var(--secondary-elements);
  }
}