@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-activity-card';
$card-spacing-sm: 8px;
$card-spacing-md: 16px;

#{$Component} {
  border-radius: $at-activity-card-radius;
  overflow: hidden;
  position: relative;
  background: $color-bg;

  &-image-container {
    display: block;

    .at-badge-text {
      top: 0;
      transform: initial;
      background: $color-brand;
      border-radius: 0 $at-activity-card-radius 0 $at-activity-card-radius;
      line-height: 46px;
      height: 46px;
      padding: 0 20px;
      right: 0;
      margin-top: 0;
    }

    #{$Component}-image {
      width: 100%;
      height: 340px;
      vertical-align: middle;
    }
  }

  &-content {
    padding: $spacing-v-lg $spacing-h-lg;

    .at-tag {
      line-height: $at-tag-height-xs - 2px;
      min-height: $at-tag-height-xs;
      vertical-align: middle;
    }

    #{$Component}-title {
      line-height: 48px;
      display: flex;
      align-items: center;

      &-text {
        font-size: $font-size-caption;
        font-weight: bold;
        vertical-align: middle;
        @include line();
      }

      .at-tag {
        margin-left: 20px;
        white-space: nowrap;
      }
    }

    #{$Component}-countdown-tag-container {
      line-height: 20px;
      margin-top: $card-spacing-sm;

      .at-tag {
        padding: 0 $spacing-h-md;
      }
    }

    #{$Component}-content-list {
      font-size: $font-size-slg;
      color: $color-grey-2;

      &-text {
        margin-top: $card-spacing-sm;
        @include line(2);
      }

      &-item {
        margin-top: $card-spacing-sm;
        @include line();
      }
    }
  }

  //活动详情
  &.type-activity-detail {
    border-radius: initial;

    #{$Component}-image-container {
      .at-badge-text {
        border-radius: 0 0 0 $at-activity-card-radius;
      }

      #{$Component}-image {
        height: 380px;
      }
    }

    #{$Component}-content {
      #{$Component}-title {
        display: block;

        &-text {
          white-space: pre-wrap;
        }
      }

      #{$Component}-countdown-tag-container {
        margin-bottom: 24px;
      }

      #{$Component}-content-list {
        color: $color-grey-1;
        font-size: $font-size-sml;

        &-item {
          margin-top: $card-spacing-md;
          white-space: pre-wrap;
        }
      }
    }
  }

  //公告卡片
  &.type-notice-card {
    #{$Component}-image-container {
      padding: $spacing-v-lg $spacing-h-xl 0;

      #{$Component}-image {
        height: 308px;
      }
    }

    #{$Component}-content {
      padding: $card-spacing-md $spacing-h-xl;

      #{$Component}-content-list {
        font-size: $font-size-sml;

        &-text {
          margin-top: $card-spacing-md;
        }
      }
    }

    #{$Component}-bottom {
      padding: $spacing-v-lg $spacing-h-xl;
      @include hairline-top();

      .at-list__item {
        padding: 0;
        line-height: 40px;

        .item-content__info-title {
          font-size: $font-size-sml;
          color: $color-grey-3;
        }

        .item-extra {
          &__info {
            font-size: $font-size-sml;
            color: $color-grey-0;
            padding-right: $spacing-h-md;
          }

          &__icon-arrow {
            font-size: $font-size-sm;
          }
        }
      }
    }
  }

  // 文章卡片
  &.type-artical-card {
    border-radius: 0;
    display: flex;
    padding: $spacing-v-lg 0;
    flex-direction: row-reverse;
    @include hairline-bottom();

    &#{$Component}-position-left {
      flex-direction: row;

      #{$Component}-image-container {
        margin-right: $spacing-h-lg;
        margin-left: 0;
      }
    }

    #{$Component}-image-container {
      flex: 0 0 200px;
      margin-left: $spacing-h-lg;

      #{$Component}-image {
        height: 160px;
        border-radius: $border-radius-md;
      }
    }

    #{$Component}-content {
      padding: 0;
      flex: 1;
      width: 0;

      #{$Component}-title {
        line-height: 42px;
        height: 84px;
        display: block;

        &-text {
          font-size: $font-size-slg;
          white-space: pre-wrap;
          @include line(2);
        }
      }

      &-time {
        margin-top: $card-spacing-md;
        font-size: $font-size-sml;
        color: $color-grey-3;
      }
    }
  }
}