.#{$ns}Card {
  background: var(--saas-main-bg);
  border: var(--Card-borderWidth) solid var(--Card-borderColor);
  border-radius: var(--Card-borderRadius);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  margin: 4px;

  &--link {
    cursor: pointer;
  }

  &-title {
    color: var(--text-color);
    font-size: 15px;
    font-weight: var(--fontWeightMd);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
    min-width: 40px;
  }

  &-title-text {
    display: flex;
    align-items: center;

    .tags {
      display: flex;
      align-items: center;

      .tag-item {
        @include ellipsis();
        max-width: 100px;
        margin: 0 2px;
        border-radius: 4px;
        background-color: var(--saas-crud-advanced-modle-body-condition-color);
        font-size: 12px;
        color: var(--saas-font-size-dark-black);
        width: unset;
        height: 16px;
        padding: 0px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  &-subTitle {
    // white-space: nowrap;
    max-height: calc(var(--fontSizeBase) * var(--lineHeightBase) * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text--muted-color);

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }

  &-title-body {
    display: flex;
  }

  &-title+&-subTitle {
    margin-top: 0;
    max-height: none;
    line-height: normal;
    overflow: unset;

    .#{$ns}MappingField {
      display: inline-block;
      overflow: unset;

      .#{$ns}TplField {
        display: inline-block;

        >span {
          display: inline-block;
          height: auto;

          >span {
            line-height: 1.5;
          }
        }
      }
    }

  }

  &-dragBtn {
    display: inline-block;
    cursor: pointer;
    padding: 0 var(--gap-sm);
  }

  &-heading {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    // flex: 1 0 auto;
  }

  &-avtarimg {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--saas-border-color);
    margin-bottom: 8px;

    .#{$ns}Card-avtar {
      margin: 0 auto;
      height: 100%;
      width: 100%;
      padding: 0 8px;
      border-radius: 0;
      float: none;
      overflow: hidden;

      img {
        height: 100%;
      }
    }

    &>div {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #BBD3FB;

      svg {
        max-width: 36px;
      }
    }
    .card-empty-pic {
      justify-content: center;
    }
  }

  &-avtar {
    max-width: px2rem(200px);

    img {
      max-width: 100%;
    }
  }

  &-avtarText {
    flex-shrink: 0;
    background: var(--primary);
    color: var(--white);
    width: 94px;
    height: 94px;
    line-height: 94px;
    text-align: center;
    vertical-align: middle;
    border-radius: 500px;
    font-size: 16px;
    display: inline-block;
    margin: 8px auto;
  }

  &-meta {
    // flex-grow: 1;
    flex: 1; //Aug
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 8px;

    &-content {
      display: flex;
      flex-direction: column;
    }
  }

  &-meta+&-toolbar {
    margin-left: var(--gap-md);
  }

  &-body-content {
    display: flex;
    overflow: hidden;
    width: 100%;
    margin-bottom: 4px;

    .#{$ns}Card-meta+.#{$ns}Card-toolbar {
      margin-left: 0;
    }
  }

  &-toolbar {
    line-height: normal;
    text-align: right;
  }

  .#{$ns}Checkbox.#{$ns}Card-CheckboxNoModle {
    position: absolute;
    top: -20px;
    left: -28px;
    margin: 0;

    >i {
      border: none;
      width: 40px !important;
      height: 40px !important;
      border-radius: 0;
      transform: rotateZ(45deg);
      background-color: rgba(207, 228, 254);

      &::before {
        transform: translate(45%, -60%) rotate(-90deg);
      }
    }
  }

  &-highlight {
    background: var(--success);
    width: px2rem(8px);
    height: px2rem(8px);
    border-radius: 100%;
    display: inline-block;
    margin: 0 var(--gap-sm);
  }

  &-body {
    padding: 8px;
    flex: 1 0 auto;
  }

  &-heading+&-body {
    padding-top: 0;
  }

  &-field {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    width: 50%;
    font-size: 12px;

    >.#{$ns}Card-fieldValue {
      display: flex;
      align-items: center;
      min-height: 25px;

      .#{$ns}Form-item {
        margin-bottom: 0;
      }

      &.is-linkUrl {
        color: #4f86f4;
        cursor: pointer;
      }
    }
  }

  &-desc {
    color: var(--saas-font-size-dark-black);
    font-size: 12px;
  }

  &-fieldValue {
    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--saas-font-size-black);

    &.is-linkUrl {
      color: #4f86f4;
      cursor: pointer;
    }

    .#{$ns}Progress {
      flex: 1;

      &-line {
        width: calc(100% - 3em);
        margin: 0;
        padding: 0;
      }

      &-line-text {
        margin-left: 0;
        text-align: center
      }
    }
  }



  &-fieldLabel {
    color: var(--saas-font-size-dark-black);
    font-size: 12px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: left;
    width: px2rem(60px);

    span {
      @include ellipsis();
      width: auto;
      max-width: calc(100% - 3px);
    }
  }

  &-actions {
    border-top: var(--Card-borderWidth) solid var(--Card-actions-borderColor);
    width: 100%;
    text-align: right;
    overflow: auto;
    padding: 6px 0;
    white-space: nowrap;

    >a {
      background: transparent;
      flex-grow: 1;
      border-color: var(--Card-actions-borderColor);
      border-style: solid;
      border-width: 0 var(--Card-borderWidth) 0 0;
      color: var(--text-color);
      text-align: center;
      line-height: px2rem(40px);
      font-size: var(--Card-actions-fontSize);

      &:not(.is-disabled) {
        cursor: pointer;

        &:hover {
          background: var(--Card-actions-onHover-bg);
          color: var(--Card-actions-onHover-color);
          text-decoration: none;
        }
      }

      &:last-child {
        border: none;
      }

      &.is-disabled {
        color: var(--text--muted-color);

        &:hover {
          text-decoration: none;
        }
      }
    }

    >button {
      margin: 0 3px;
    }
  }

  &.is-checked {
    background: var(--Card-onChecked-bg);
    border-color: var(--Card-onChecked-borderColor);
    color: var(--Card-onChecked-color);

    .#{$ns}Card-actions,
    .#{$ns}Card-actions>a {
      border-color: var(--Card-onChecked-borderColor);
      color: var(--Card-onChecked-color);
    }

    .#{$ns}Card-fieldLabel {
      color: var(--Card-onChecked-fieldLabel-color);
    }

    .#{$ns}Card-actions>a:hover {
      background: var(--Card-actions-onChecked-onHover-bg);
      color: var(--Card-actions-onChecked-onHover-color);
    }
  }

  &.is-modified,
  &.is-moved {
    background: var(--Card-onModified-bg);
    border-color: var(--Card-onModified-borderColor);
    color: var(--Card-onModified-color);

    .#{$ns}Card-actions,
    .#{$ns}Card-actions>a {
      border-color: var(--Card-onModified-borderColor);
      color: var(--Card-onModified-color);
    }

    .#{$ns}Card-fieldLabel {
      color: var(--Card-onModified-fieldLabel-color);
    }

    .#{$ns}Card-actions>a:hover {
      background: var(--Card-onModified-onHover-bg);
      color: var(--Card-onModified-onHover-color);
    }
  }

  .is-dragging>& {
    opacity: var(--Card-onDragging-opacity);
  }

  &-footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-actions-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    overflow: hidden;
  }

  &-checkbox {
    margin: 0 var(--gap-sm) !important;
  }

  &-secondary {
    max-width: 12.5rem;
    color: var(--Card-secondary-color);
    padding: 0 var(--gap-md);
    font-size: var(--fontSizeMd);
    font-weight: var(--fontWeightBase);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-secondary+&-actions-wrapper {
    .#{$ns}Card-actions {
      margin-left: unset;
      border: none;
      width: unset;
    }

    .#{$ns}Card-actions>a {
      border: none;
    }
  }

  &-multiMedia--top,
  &-multiMedia--bottom,
  &-multiMedia--left,
  &-multiMedia--right {
    .#{$ns}Card-actions-wrapper {
      .#{$ns}Card-actions {
        margin-left: unset;
        border: none;
        width: unset;
      }

      .#{$ns}Card-actions>a {
        border: none;
      }
    }
  }

  &-multiMedia--top {
    display: block;

    .#{$ns}Card-multiMedia-img {
      border-bottom-left-radius: unset;
      border-bottom-right-radius: unset;
    }
  }

  &-multiMedia--bottom {
    display: flex;
    flex-direction: column-reverse;

    .#{$ns}Card-actions {
      border-bottom: var(--Card-borderWidth) solid var(--Card-actions-borderColor);
    }

    .#{$ns}Card-multiMedia-img {
      border-top-left-radius: unset;
      border-top-right-radius: unset;
    }
  }

  &-multiMedia--top,
  &-multiMedia--bottom {
    .#{$ns}Card-body {
      padding-bottom: var(--gap-md);
    }
  }

  &-multiMedia--left {
    display: flex;
    align-items: center;

    .#{$ns}Card-actions {
      margin-left: var(--gap-md);
      border-left: var(--Card-borderWidth) solid var(--Card-actions-borderColor);
    }

    .#{$ns}Card-multiMedia-img,
    .#{$ns}Card-multiMedia-video {
      margin: var(--gap-md) 0 var(--gap-md) var(--gap-md);
    }
  }

  &-multiMedia--right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;

    .#{$ns}Card-actions {
      margin-right: var(--gap-md);
      border-right: var(--Card-borderWidth) solid var(--Card-actions-borderColor);
    }

    .#{$ns}Card-multiMedia-img,
    .#{$ns}Card-multiMedia-video {
      margin: var(--gap-md) var(--gap-md) var(--gap-md) 0;
    }
  }

  &-multiMedia-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &-multiMedia-img {
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--Card-borderRadius);
  }

  &-multiMedia-video {
    width: px2rem(180px);
    height: px2rem(120px);

    .#{$ns}Video {
      width: 100%;
      height: 100%;
      min-width: unset;
      border-radius: var(--Card-borderRadius);
      overflow: hidden;

      .#{$ns}Video-player {
        width: 100%;
        height: 100%;

        .video-react {
          width: 100%;
          height: 100%;
          padding-top: unset !important;
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .#{$ns}Card {
    border-radius: 0;
    overflow: hidden;
    border: none;

    &-avtarimg {
      border-bottom: none;
      margin-bottom: 0;

      .#{$ns}Card-avtar {
        padding: 0;
      }
    }


    &-body-content {
      margin: 5px 0;
    }

    &-desc {
      margin-top: 2px;

      span {
        display: block;
        @include ellipsis();
        font-size: 12px;
      }
    }
    &-fieldValue {
      .#{$ns}Form-feedback-icon {
        @include ellipsis()
      }
    }
  }
}