.root {
  --background-color: var(--color-background);

  transition: transform var(--chat-transform-transition);

  :global(.ListItem-button) {
    min-height: auto;
  }
}

.noAnimation {
  transition: none;
}

.minimized {
  margin: -0.5rem -0.5rem 0 -0.5rem !important;
  background-color: var(--color-background-secondary);

  &::after {
    display: none;
  }

  &.noMarginTop {
    margin-top: 0 !important;
  }

  &:hover {
    opacity: 0.85;
  }

  .button {
    padding: 0.375rem !important;
    border-radius: 0;
    background-color: transparent;
  }

  :global(body.is-ios) &,
  :global(body.is-android) & {
    .button {
      padding-bottom: 0.3125rem !important;
    }
  }

  .title {
    justify-content: center !important;
    color: var(--color-text-secondary);
  }

  .unread-count {
    position: absolute;
    right: 0.75rem;

    font-size: 0.8125rem;
    color: var(--color-text-secondary);

    background-color: transparent;
  }

  .info {
    transform: none !important;
  }

  .name {
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
  }
}

.info {
  transition: opacity 0.3s ease, transform var(--layer-transition);

  :global(body.no-page-transitions) & {
    transition: opacity 0.3s ease;
  }
}

.icon {
  margin-inline-end: 0.5rem;
}

.name {
  display: flex;
  align-items: center;
}

.avatarWrapper {
  z-index: 1;
  flex-shrink: 0;
  background-color: var(--background-color);
}

.avatar {
  font-size: 1.625rem;
  background: linear-gradient(var(--color-white) -125%, var(--color-archive)) !important;
}

.title {
  flex-grow: 1;
}

.chatsPreview {
  overflow: hidden;
  flex-grow: 1;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
}

.unread {
  color: var(--color-text);
}
