@use "../variables" as *;
@use "../helpers/mixins" as *;

/********** Colors **********/

/********** Fonts **********/

/********** Styles **********/
.#{$prefix}-conversation-list {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  height: 100%;
  color: $conversation-list-color;
  background-color: $conversation-list-bg-color;

  & > div > ul {
    @include reset-list;
  }

  &__loading-more {
    box-sizing: content-box;
    @include flex-row;
    justify-content: center;
    position: absolute;
    background-color: $conversation-list-loading-more-bg-color;
    padding: $conversation-list-loading-more-padding;
    bottom: 0;
    left: 0;
    right: 0;
    height: $conversation-list-loading-more-height;
    z-index: 1;

    .#{$prefix}-loader {
      width: $conversation-list-loading-more-height;
      height: $conversation-list-loading-more-height;
    }

    .#{$prefix}-loader::before,
    .#{$prefix}-loader::after {
      width: 100%;
      height: 100%;
    }

  }

  // Perfect scrollbar fix to hide loading more indicator
  .ps__rail-y {
    z-index: 2;
  }

}