@import 'variable';
@import '../../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';

.#{$hashClassName}.#{$class-prefix}-list {
  &-show-border-radius {
    border-radius: $m-radius-larger;
    overflow: hidden;
  }

  .#{$class-prefix}-list-item {
    min-height: var(--cn-list-item-min-height);
    padding-left: var(--cn-list-item-padding-lr);
    padding-right: var(--cn-list-item-padding-lr);
    background-color: var(--cn-list-bg-color);
    color: var(--cn-list-title-color);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    transition: background-color 0.1s;

    &-inner {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: var(--cn-list-border-width) solid
        var(--cn-list-divider-border-bottom-color);
    }

    &--disabled {
      opacity: 0.3;
    }

    &:active {
      background: var(--cn-list-active-bg-color);
    }

    &-container {
      flex: 1;
      min-height: var(--cn-list-item-min-height);
      min-width: 1rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding-top: var(--cn-list-item-padding-tb);
      padding-bottom: var(--cn-list-item-padding-tb);
      box-sizing: border-box;
    }

    &-content {
      flex: 1;
      min-width: 1rpx;
    }

    &-media {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-right: var(--cn-list-item-spacing);
    }

    &-media--last {
      justify-content: flex-end;
      margin-right: 0;
      margin-left: var(--cn-list-item-spacing);
      .cn-ui-m-status-tag {
        margin-left: var(--cn-list-item-spacing);
      }
    }

    &-title {
      flex: 1;
      min-width: 1rpx;
      color: var(--cn-list-title-color);
      font-size: var(--cn-list-title-font-size);
      text-align: left;
      text-overflow: ellipsis;
      word-wrap: break-word;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    // 影响 jsx 版本写法注释掉
    //&-content > &-caption:nth-child(2) {
    //  margin-top: var(--cn-list-title-padding-bottom);
    //}

    &-caption {
      font-size: var(--cn-list-caption-font-size);
      color: var(--cn-list-caption-color);
      line-height: 1.5;
    }

    &-extra {
      font-size: var(--cn-list-extra-font-size);
      color: var(--cn-list-extra-color);
      line-height: 1.5;
    }

    &-icon.cn-ui-m-icon-remote {
      font-size: var(--cn-list-icon-font-size);
      color: var(--cn-list-icon-color);
    }
  }

  .#{$class-prefix}-list-item:last-child .#{$class-prefix}-list-item-inner {
    border-bottom: none;
  }
}