@use 'mixins/amixin' as *;
.mat-mdc-card {
  color: inherit;
  background-color: var(--mat-sys-background);
  &:hover {
    cursor: pointer;
  }
  .meta {
    .badge {
      background-color: var(--mat-sys-primary);
      color: var(--mat-sys-on-primary);
    }
  }
  .mat-mdc-card-title {
    ::ng-deep {
      a {
        color: var(--mat-sys-on-surface);
        &:hover {
          color: var(--mat-sys-primary);
        }
      }
    }
  }
  .mat-mdc-card-subtitle {
    color: inherit;
  }
}
.card-body {
  min-height: 40px;
}

.card-header {
  margin-top: -16px !important;

  ::ng-deep {
    .swiper-container,
    .feature-inner {
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      width: 100%;
      &:after,
      &:before {
        right: 0 !important;
      }
    }
    .feature-cover {
      &:after,
      &:before {
        left: 0;
      }
    }
    .swiper-container {
      .feature-inner {
        width: 100%;
        margin: 0;
      }
    }
    .swiper-container {
      .mat-mdc-card-image {
        margin: 0 0 16px 0px;
      }
    }
    .feature-box {
      overflow: visible;
    }
  }
}

.mat-mdc-card-subtitle,
.card-body {
  font-size: 14px;
  word-break: break-word;
  color: var(--mat-sys-on-surface-variant);
}

.mat-mdc-card-content {
  ::ng-deep {
    .mat-mdc-card-avatar {
      position: relative;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .mat-mdc-card-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

// style
.card {
  &.card-no-shadow {
    box-shadow: none !important;
    border: 0 !important;
  }
  ::ng-deep .meta {
    font-size: small;
    .item {
      margin-bottom: 2px;
      .inline-lightbox {
        .inline {
          @apply line-clamp-1;
          display: block;
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }
    }
    .badge {
      @apply line-clamp-1;
      padding: 4px 10px;
      border-radius: 15px;
      margin-bottom: 8px;
      display: inline-block;
      &:empty {
        display: none !important;
        opacity: 0;
      }
    }
  }
  ::ng-deep .mat-mdc-card-footer .mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
    border-radius: 0 0 4px 4px;
  }
}
.footer {
  padding: 0 16px 16px;
  ::ng-deep {
    .meta {
      .item {
        margin-bottom: 10px;
      }
    }
  }
}
