@import '../../style/mixins/hairline.less';

// @list-color: #888;
// @list-item-hover-color: #f8f8f8;

.am-list {
  &-item {
    display: flex;
    align-items: center;
    background: @color-fill-grey-inverse;
    background: var(--am-list-item-background, @color-fill-grey-inverse);
    &-hover {
      // hover 样式
      // background-color: #eee;
      filter: brightness(0.9);
    }
    &-radius {
      margin: 0 @h-spacing-large;
      margin: 0 var(--am-list-item-outside-spacing, @h-spacing-large);
      border-radius: @corner-radius-lg;
      border-radius: var(--am-list-item-border-radius, @corner-radius-lg);
    }
  }
  &-prefix {
    display: flex;
    // flex: 1;
    align-items: center;
    padding: @h-spacing-large;
    padding: var(--am-list-item-padding, @h-spacing-large);
    padding-right: 0;
  }

  &-supporting {
    margin-right: @h-spacing-large;
    margin-right: var(--am-list-item-padding, @h-spacing-large);
    color: @color-text-subtitle;
    color: var(--am-list-item-content-subtitle-color, @color-text-subtitle);
    font-size: @font-size-subtitle;
    font-size: var(--am-list-item-subtitle-size, @font-size-subtitle);
    display: flex;
  }
  &-thumb {
    width: 30px; //设计稿里面没有含thumb
    height: 30px;
    margin-right: @h-spacing-large;
    margin-right: var(--am-list-item-padding, @h-spacing-large);
  }
  &-line {
    position: relative;
    padding: @h-spacing-large;
    padding: var(--am-list-item-padding, @h-spacing-large);
    padding-left: 0;
    flex: 1;
    display: flex;
    align-items: center;
    align-self: stretch;
    overflow: hidden;
    max-width: 100%;
    .hairline("bottom");
  }

  &-text-wrapper {
    margin-right: @h-spacing-large;
    margin-right: var(--am-list-item-padding, @h-spacing-large);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    &__fix {
      flex: 1;
    }
  }

  &-content {
    flex: 3;
    text-align: left;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    overflow: hidden;
    line-height: normal;

    &-title,
    &-subtitle {
      display: flex;
      align-items: center;
      // line-height: 1.5;
    }

    &-title {
      font-size: @font-size-list;
      font-size: var(--am-list-item-content-title-size, @font-size-list);
      color: @color-text-title;
      color: var(--am-list-item-content-color, @color-text-title);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: flex;
    }
    &-subtitle {
      font-size: @font-size-subtitle;
      font-size: var(--am-list-item-subtitle-size, @font-size-subtitle);
      color: @color-text-subtitle;
      color: var(--am-list-item-content-subtitle-color, @color-text-subtitle);
    }
    &-subtitle-small {
      font-size: @font-size-content;
      font-size: var(--am-list-item-content-subtitle-size-small, @font-size-content);
    }
  }
  &-extra {
    color: @color-text-subtitle;
    color: var(--am-list-item-extra-color, @color-text-subtitle);
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
    align-items: center;
    margin-left: @h-spacing-large;
    margin-left: var(--am-list-item-padding, @h-spacing-large);
    flex: 2;
    overflow: hidden;
  }
  &-primary {
    color: @color-text-title;
    color: var(--am-list-item-content-color, @color-text-title);
    font-size: @font-size-list;
    font-size: var(--am-list-item-content-title-size, @font-size-list);
  }

  &-wrap {
    .am-list-content,
    .am-list-extra {
      white-space: normal;
      word-break: break-all;
    }
  }
  &-arrow {
    display: flex;
    align-items: center;
    margin-left: @h-spacing-large;
    margin-left: var(--am-list-item-arrow-margin, @h-spacing-large);
    height: @icon-size-sm;
    height: var(--am-list-item-arrow-size, @icon-size-sm);
    width: @icon-size-sm;
    width: var(--am-list-item-arrow-size, @icon-size-sm);
  }
  // 子元素垂直对齐
  &-item.last {
    .am-list-line::after,
    .am-list-line-bottom::after {
      display: none;
    }
  }
}
