@root-entry-name: 'default';

@import (reference) '~antd/es/style/themes/index.less';

@pro-checkcard-prefix-cls: ~'@{ant-prefix}-pro-checkcard';

@pro-checkcard-padding-content: @padding-sm @padding-md;
@pro-checkcard-padding-cover: @padding-xss;
@pro-checkcard-border-color: @border-color-base;
@pro-checkcard-loading-background: @card-skeleton-bg;

@pro-checkcard-gradient-min: fade(@pro-checkcard-loading-background, 20%);
@pro-checkcard-gradient-max: fade(@pro-checkcard-loading-background, 40%);

.pro-checkcard-lg() {
  width: 440px;
}

.pro-checkcard-sm() {
  width: 212px;
}

// == when focus or actived
.pro-checkcard-active() {
  background-color: @item-active-bg;
  border-color: @outline-color;
}

.pro-checkcard-disabled() {
  background-color: @disabled-bg;
  border-color: @pro-checkcard-border-color;
  cursor: not-allowed;

  .@{pro-checkcard-prefix-cls} {
    &-description {
      color: @disabled-color;
    }

    &-title {
      color: @disabled-color;
    }

    &-avatar {
      opacity: 0.25;
    }
  }
}

.@{pro-checkcard-prefix-cls}-group {
  display: inline-block;
}

.@{pro-checkcard-prefix-cls} {
  position: relative;
  display: inline-block;
  width: 320px;
  margin-right: 16px;
  margin-bottom: 16px;
  color: @text-color;
  font-size: @font-size-base;
  line-height: @line-height-base;
  vertical-align: top;
  background-color: @white;
  border-radius: @border-radius-base;
  cursor: pointer;
  transition: all @animation-duration-base;

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

  & + & {
    margin-left: 0 !important;
  }

  &-bordered {
    border: @border-width-base @border-style-base @pro-checkcard-border-color;
  }

  &-loading {
    overflow: hidden;
    user-select: none;
    &-content {
      padding: @pro-checkcard-padding-content;
      p {
        margin: 0;
      }
    }

    &-block {
      height: 14px;
      margin: 4px 0;
      background: linear-gradient(
        90deg,
        @pro-checkcard-gradient-min,
        @pro-checkcard-gradient-max,
        @pro-checkcard-gradient-min
      );
      background-size: 600% 600%;
      border-radius: @card-radius;
      animation: card-loading 1.4s ease infinite;
    }

    @keyframes card-loading {
      0%,
      100% {
        background-position: 0 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }
  }

  &:focus {
    .pro-checkcard-active();
  }

  &-checked {
    .pro-checkcard-active();
  }

  &-disabled {
    .pro-checkcard-disabled();
  }

  &[disabled] {
    .pro-checkcard-disabled();
  }

  // Size
  &-lg {
    .pro-checkcard-lg();
  }

  &-sm {
    .pro-checkcard-sm();
  }

  &-cover {
    padding: @pro-checkcard-padding-cover;
    img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: @border-radius-base;
    }
  }

  &-content {
    display: flex;
    padding: @pro-checkcard-padding-content;
  }

  &-avatar-header {
    display: flex;
    align-items: center;
  }

  &-avatar {
    padding-right: 8px;
  }

  &-detail {
    overflow: hidden;
    > div:not(:last-child) {
      margin-bottom: 4px;
    }
  }

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

  &-title {
    overflow: hidden;
    color: @card-head-color;
    font-weight: 500;
    font-size: @font-size-base;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &-description {
    color: @text-color-secondary;
  }

  &:not(.@{pro-checkcard-prefix-cls}-disabled) {
    &:hover {
      border-color: @primary-color;
    }
  }
}

.@{pro-checkcard-prefix-cls}-checked {
  &::after {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0;
    height: 0;
    border: 6px solid @primary-color;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top-right-radius: 2px;
    content: '';
  }
}