@use "../../../icon_fonts" as *;

.dx-chat-messagelist {
  flex-grow: 1;
  min-height: 3.57em;
  overflow: hidden;

  .dx-scrollable-container {
    overscroll-behavior: contain;
    will-change: scroll-position;
  }

  .dx-scrollable-content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .dx-scrollable-native {
    &.dx-scrollable-native-ios {
      .dx-scrollable-content {
        min-height: 100%;
        box-sizing: border-box;
      }
    }
  }

  .dx-scrollview-bottom-pocket {
    width: 100%;
  }

  .dx-scrollview-scrollbottom-text {
    margin: 0;
  }

  &.dx-chat-messagelist-empty {
    .dx-scrollable.dx-scrollview {
      .dx-scrollable-content {
        height: 100%;
      }
    }
  }

  .dx-scrollview-scrollbottom-indicator {
    box-shadow: none;
  }
}

.dx-chat-messagelist-empty {
  .dx-scrollview-content {
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  .dx-chat-messagelist-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.dx-chat-messagelist-empty-loading {
  .dx-scrollable-content {
    justify-content: center;
  }
}

.dx-chat-messagelist-empty-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  text-align: center;
}

.dx-chat-messagelist-empty-image {
  @include dx-icon(chat);

  border-radius: 999em;
}

.dx-chat-messagelist-day-header {
  text-align: center;
}