@include b(skeleton-card) {
  @include set-component-css-var('skeleton', $skeleton);

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  @include b(skeleton-card-header) {
    width: 100%;

    @include e(title) {
      width: 50%;
      height: 16px;
      margin-bottom: 24px;
      line-height: 16px;
      background: getCssVar('skeleton', 'bg-color');  
      border-radius: 2px;
    }
  }

  @include b(skeleton-card-content) {
    flex: 1;
    overflow: hidden;

    @include e(item) {
      width: 100%;
      height: 16px;
      margin-bottom: 12px;
      line-height: 16px;
      background: getCssVar('skeleton', 'bg-color');
      border-radius: 2px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  @include m(active) {
    @include b(skeleton-card-header) {
      @include e(title) {
        position: relative;
        z-index: 0;
        overflow: hidden;
        background: transparent;

        &::after {
          position: absolute;
          top: 0;
          right: -150%;
          bottom: 0;
          left: -150%;
          content: '';
          background: linear-gradient(
            90deg,
            getCssVar('skeleton', 'bg-color') 25%,
            getCssVar('skeleton', 'transition-color') 37%,
            getCssVar('skeleton', 'bg-color') 63%
          );
          animation: skeleton-element-loading 1.4s ease infinite;
        }
      }
    }

    @include b(skeleton-card-content) {
      @include e(item) {
        position: relative;
        z-index: 0;
        overflow: hidden;
        background: transparent;

        &::after {
          position: absolute;
          top: 0;
          right: -150%;
          bottom: 0;
          left: -150%;
          content: '';
          background: linear-gradient(
            90deg,
            getCssVar('skeleton', 'bg-color') 25%,
            getCssVar('skeleton', 'transition-color') 37%,
            getCssVar('skeleton', 'bg-color') 63%
          );
          animation: skeleton-element-loading 1.4s ease infinite;
        }
      }
    }
  }

  @include m(round) {
    @include b(skeleton-card-header) {
      @include e(title) {
        border-radius: 100px;
      }
    }

    @include b(skeleton-card-content) {
      @include e(item) {
        border-radius: 100px;
      }
    }
  }

  @keyframes skeleton-element-loading {
    0% {
      transform: translateX(-37.5%);
    }

    100% {
      transform: translateX(37.5%);
    }
  }
}
