@import "./import.less";

:host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

// 聊天列表
.@{prefix}-chat__list {
  box-sizing: border-box;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--td-chat-list-padding-bottom);
  // 隐藏滚动条但保留滚动功能
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  &::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }

  & *, *::before, *::after {
    box-sizing: border-box;
  }

  &__scroll__button__container {
    position: sticky;
    top: var(--td-chat-list-scroll-button-top);
    left: var(--td-chat-list-scroll-button-left);
    z-index: var(--td-chat-list-scroll-button-index);

    &--hide {
      display: none;
    }
  }

  &__scroll__button {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: var(--td-chat-list-scroll-button-left);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--td-chat-list-scroll-button-w);
    height: var(--td-chat-list-scroll-button-h);
    border: var(--td-chat-list-scroll-button-border);
    border-radius: var(--td-chat-list-scroll-button-radius);
    background-color: var(--td-chat-list-scroll-button-bg);
    font-size: var(--td-chat-list-scroll-button-font-size);
    z-index: var(--td-chat-list-scroll-button-index);
    transform: var(--td-chat-list-scroll-button-transform);
    box-shadow: var(--td-chat-list-scroll-button-shadow);
    cursor: pointer;
  }
}