.#{$ns}Offline-image {
  &-item {
    &:not(:first-child) {
      margin-left: 12px;
    }
  }

  .offline-image-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .#{$ns}Offline-form-item {
    background-color: #fff;
    padding: 16px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .5px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue;
    color: #000;
    position: relative;

    label {
      color: rgba($color: #000000, $alpha: .4);

      .fa {
        color: #000;
      }
    }

    .img-left {
      width: 22px;
      height: 22px;
      overflow: hidden;

      img {
        background-size: contain;
      }
    }

    .img-right {
      text-align: left;
      flex: 1;
      overflow-x: hidden;
      margin: auto 8px;

      &>div {
        @include ellipsis();
      }

      .img-size {
        color: #bfbfbc;
        font-size: 12px;
        font-weight: 400;
      }
    }

    .img-del {
      width: 24px;
      text-align: center;
      color: #bfbfbc;
    }

    >label {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .#{$ns}Offline-image-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 0;
      margin-top: 10px;
      background-color: #f6f6f6;
      padding: 4px;
    }

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      border-bottom: 1px solid #eceff8;
      width: calc(100% - 16px);
    }
  }
}