
@import '../../src/style/tools.css';

.bx-cell + .bx-cell {
  & .bx-cell-center-right {
    position: relative;

    &::after {
      @apply --hairline--top;

      background-color: var(--cell-border-color);
    }
  }
}

.bx-cell {
  background-color: var(--cell-bg-color);
  display: flex;

  & .bx-cell-left {
    margin-left: 15px;

    & .img-responsive {
      max-width: 24px;
      max-height: 24px;
    }

    & .bx-cell-image-wrapper {
      position: relative;
      max-width: 60px;
      max-height: 60px;
      margin: 13px 0;
      display: inherit;

      & .bx-icon {
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  & .bx-cell-center-right {
    margin-left: 15px;
    padding-right: 9px;
    display: flex;
    padding-top: 16px;
    padding-bottom: 16px;
    flex: 1;
    overflow: hidden; /* 子元素的单行省略 */
  }

  &.hide-right .bx-cell-right {
    display: none;
  }

  & .bx-cell-center {
    flex: 1;
    font-size: 15px;
    color: var(--cell-title-color);
    overflow: hidden; /* 子元素的单行省略 */
    & .bx-cell-title-line {
      display: flex;
      justify-content: space-between;

      & .bx-cell-title {
        flex: 1;

        &.bx-cell--one-line { /* 标题单行省略 */
          @apply --ellipsis;

          display: inline-block;
        }
      }
    }
  }

  & .bx-cell-right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: var(--cell-ellipsis-margin);

    & .bx-icon {
      color: var(--cell-right-icon-color);
    }

    & .bx-badge {
      margin-right: 6px;
    }

    & .bx-cell-right-value {
      color: var(--cell-right-label-color);
      font-size: 13px;
      margin-right: 6px;
    }

    & .bx-cell-right-click-span {
      position: absolute;
      top: -16px;
      left: var(--cell-ellipsis-margin-negative);
      right: -9px;
      bottom: -16px;
    }
  }
}

.bx-cell.bx-cell--hide {
  display: none;
}

/* 多行样式: bx-cell--multi-line */
.bx-cell.bx-cell--multi-line {
  &.bx-cell-logo-left {
    & .bx-cell-center-right {
      padding: 15px 15px 15px 0;
    }

    & .bx-cell-left {
      & .bx-cell-image-wrapper {
        max-width: 60px;
        max-height: 60px;
        margin: 15px 0;
      }

      & .img-responsive {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

  & .bx-cell-center {
    & .bx-cell-title-desc {
      font-size: 12px;
      color: var(--cell-title-desc-color);
      display: flex;
      align-items: center;
      margin-left: var(--cell-ellipsis-margin);
    }

    & .bx-cell-subtitle {
      display: block;
      font-size: 13px;
      color: var(--cell-subtitle-color);
      margin-top: 6px;
      line-height: 19px;

      &.bx-cell--one-line {
        @apply --ellipsis;
      }
    }
  }

  &.bx-cell-logo-right {
    & .bx-cell-title {
      font-size: 16px;
      line-height: 23px;
    }

    & .bx-cell-center-right {
      padding: 15px 15px 15px 0;

      & .bx-cell-right-logo {
        margin-left: 15px;
        display: inherit;

        & .img-responsive {
          width: 90px;
          height: 70px;
        }
      }
    }

    & .bx-cell-center {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      & .bx-cell-subtitle {
        margin-top: 11px;
      }
    }
  }
}
