@use '../../partials/flex';
@use '../../partials/dir';

.people-drawer {
  @extend .cp-fx__column;
  width: var(--people-drawer-width);
  background-color: var(--bg-surface-low);
  @include dir.side(border, 1px solid var(--bg-surface-border), none);

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

  &__content-wrapper {
    @extend .cp-fx__item-one;
    @extend .cp-fx__column;
  }

  &__scrollable {
    @extend .cp-fx__item-one;
  }

  &__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 {
        @include dir.prop(left, var(--sp-tight), unset);
        @include dir.prop(right, unset, var(--sp-tight));
      }
      & > .ic-btn {
        @include dir.prop(right, 2px, unset);
        @include dir.prop(left, unset, 2px);
      }
      & .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));
  
  & .segmented-controls {
    display: flex;
    margin-bottom: var(--sp-extra-tight);
    @include dir.side(margin, var(--sp-extra-tight), 0);
  }
  & .segment-btn {
    flex: 1;
    padding: var(--sp-ultra-tight) 0;
  }
}
.people-drawer__load-more {
  padding: var(--sp-normal) 0 0;
  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));

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