.list-ios {
  &.uofx-list {
    &.small {
      ion-item {
        --inner-padding-top: 8px;
        --inner-padding-bottom: 8px;
      }
    }

    &.no-border-bottom {
      ion-item {
        &:last-child {
          &::part(native) {
            --border-width: 0;
            --inner-border-width: 0;
          }
        }
      }
    }
  }

  ion-item {
    --min-height: none;

    --padding-start: 20px;
    --padding-top: 0;
    --padding-bottom: 0;
    --border-color: var(--uofx-border-color);

    --inner-padding-end: 16px;
    --inner-padding-top: 12px;
    --inner-padding-bottom: 12px;
    --inner-border-color: var(--uofx-border-color);

    // 頭像
    uofx-avatar-user,
    uofx-avatar {
      margin: 0 12px 0 0;
    }

    // 使用有灰色圓圈底色的 icon
    .icon-wrapper {
      background-color: #{get-color(gr-200)};
      margin-right: 12px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      uofx-icon {
        margin: 0;
      }
    }

    uofx-icon {
      @extend uofx-avatar-user;
      font-size: 2rem;
    }

    // 文字
    ion-label.sc-ion-label-ios-h {
      margin: 0;
      @include text-type(d, b1, r);

      h2 {
        @include text-type(2, b3, r);
        margin-bottom: 2px;

        > * {
          vertical-align: middle;
        }

        bpm-shared-form-status-tag {
          margin-right: 4px;
        }
      }

      h1 {
        @include text-type(d, b1, m);
        margin: 0;

        &.underline {
          text-decoration: underline;
          @include text-type(bl11, st2, r);
          @include max-line(2);
          white-space: normal;
        }
      }

      p {
        @include text-type(2, b3, r);
        margin-top: 2px;
        white-space: normal;
        @include max-line(2);
      }
    }
  }

  // -- 以下試試看統一樣式 後續有美化再調整方式(目前用在選擇關聯表單, 批次處理) --
  // 有底線的按鈕連結處裡圓角
  .selection-mode {
    --padding-start: 0;

    ion-button.linkBtn {
      min-height: 24px;
      &::part(native) {
        padding: 0;
        border-radius: 0;
      }
    }

    .top-item {
      display: flex;
      align-items: center;
    }

    .center-item {
      @include text-type(d, b1, m);
      @include max-line(2);
      white-space: initial;
      max-width: calc(100vw - 60px);
      margin: 4px 0;
    }

    .bottom-item {
      uofx-avatar-user {
        margin: 0;

        .user-info {
          @include text-type(2, b3, r);
        }
      }
    }
  }
}