// 选项
.list-item-wrapper.card {
  padding: 0 8px;
  .list-item {
    .border-0;
  }
}
.list-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 4px;
  gap: 8px;
  font-size: 16px;
  .border-b;

  // 竖向布局
  &.vertical {
    .list-item-main {
      display: block;
    }
    .list-item-content,
    .list-item-action {
      margin-left: 0;
      margin-top: var(--space-l);
    }
  }
}

// Compatiable old models. Don't use gap
.bad-android,
.bad-ios {
  .list-item {
    gap: initial;
    & > div:not(:last-child) {
      margin-right: 8px;
    }
  }
}

.list-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

// 主体
.list-item-main {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

// 元数据
.list-item-meta {
  display: flex;
  flex: 1 1;
  align-items: center;
}

// 元数据-Image,Avatar
.list-item-meta-image,
.list-item-meta-avatar {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--navbar-bg);
  .avatar {
    width: 100%;
    height: 100%;
    visibility: hidden;
  }
  &.fail {
  }
  &.success {
    .avatar {
      visibility: visible;
    }
  }
}

// 元数据-Image
.list-item-meta-image {
  &:extend(.bg-image-default all);
  width: 56px;
  height: 56px;
}
// 元数据-Avatar
.list-item-meta-avatar {
  &:extend(.bg-avatar-default all);
  width: 40px;
  height: 40px;
  border-radius: 100%;
  .avatar {
    border-radius: 100%;
  }
}

// 元数据-内容
.list-item-meta-image + .list-item-meta-content,
.list-item-meta-avatar + .list-item-meta-content {
  margin-left: 10px;
}
.list-item-meta-content {
  flex: 1 1;
}
.list-item-meta-title {
  position: relative;
  display: block;
  pointer-events: none;
}
.list-item-meta-description {
  color: var(--auxiliary);
  margin-top: 4px;
}
.list-item-meta-note {
  // 高度100%
  align-self: stretch;
  color: var(--tertiary);
  font-size: var(--font-size-s);
}

// 内容
.list-item-content {
  margin-left: var(--space-l);
}
// 操作
.list-item-action {
  margin-left: var(--space-l);
}
