cinny/src/app/organisms/room/PeopleDrawer.scss

.people-drawer-flexBox {
  display: flex;
  flex-direction: column;
}
.people-drawer-flexItem {
  flex: 1;
  min-height: 0;
  min-width: 0;
}


.people-drawer {
  @extend .people-drawer-flexBox;
  width: var(--people-drawer-width);
  background-color: var(--bg-surface-low);
  border-left: 1px solid var(--bg-surface-border);

  [dir=rtl] & {
    border: {
      left: none;
      right: 1px solid var(--bg-surface-hover);
    }
  }

  &__member-count {
    color: var(--tc-surface-low);
  }

  &__content-wrapper {
    @extend .people-drawer-flexItem;
    @extend .people-drawer-flexBox;
  }

  &__scrollable {
    @extend .people-drawer-flexItem;
  }

  &__noresult {
    padding: var(--sp-extra-tight) var(--sp-normal);
    text-align: center;
  }

  &__sticky {
    & .people-search {
      --search-input-height: 40px;
      min-height: var(--search-input-height);
  
      margin: 0 var(--sp-normal);

      position: relative;
      bottom: var(--sp-normal);
      display: flex;
      align-items: center;

      & > .ic-raw,
      & > .ic-btn {
        position: absolute;
        z-index: 99;
      }
      & > .ic-raw {
        left: var(--sp-tight);
        [dir=rtl] & {
          right: var(--sp-tight);
          left: unset;
        }
      }
      & > .ic-btn {
        right: 2px;
        [dir=rtl] & {
          left: 2px;
          right: unset;
        }
      }
      & .input-container {
        flex: 1;
      }
      & .input {
        padding: 0 calc(var(--sp-loose) + var(--sp-normal));
        height: var(--search-input-height);
      }
    }
  }
}

.people-drawer__content {
  padding-top: var(--sp-extra-tight);
  padding-bottom: calc(2 * var(--sp-normal));
}
.people-drawer__load-more {
  padding: var(--sp-normal);
  padding: {
    bottom: 0;
    right: var(--sp-extra-tight);
  }

  [dir=rtl] & {
    padding-right: var(--sp-normal);
    padding-left: var(--sp-extra-tight);
  }

  & .btn-surface {
    width: 100%;
  }
}