@use '../../base/token';
@use '../../abstract';

$card-width: 384px !default;
$radius: 16px;

.cds-card {
  $this: &;

  width: min(100%, $card-width);
  border-radius: $radius $radius 0 0;
  color: var(--gray-400);
  font-size: var(--font-size-2);

  &__img {
    display: block;
    margin-block-end: 24px;
    width: 100%;
  }

  &__categories {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-block-end: 8px;
    font-size: var(--font-size-1);
    line-height: #{token.$line-heights-9}px;
  }

  &__category {
    color: var(--secondary-gray-blue-450);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  }

  &__date {
    color: var(--secondary-gray-blue-400);
  }

  &__title {
    margin-block-end: 8px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    font-size: var(--font-size-5);
    color: var(--gray-700);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    line-height: #{token.$line-heights-5}px;

    &-text {
      @include abstract.ellipsis(3);
      white-space: pre-wrap;
    }

    svg {
      flex: none;
      margin-block-start: 4px;
    }
  }

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

  &__content {
    margin-block-start: 24px;
  }
  &__content > *:last-child {
    margin-block-end: 0;
  }

  // modifier
  // type: image, image-full, text
  // ========================================================
  &--image #{$this}__img {
    border-radius: 0 0 $radius $radius;
  }

  &--image-full {
    border: 1px solid var(--gray-100);

    #{$this}__img {
      border-radius: 0;
    }

    #{$this}__content {
      padding: 0 24px 24px;
    }
  }

  &--text {
    border-width: 0;
    border-radius: 0;
    overflow: visible;

    #{$this}__img {
      display: none;
    }
  }
}

// ==========================================
// children으로 받는 옵션 영역
// ==========================================

// card option icon
// ==========================================
.cds-card__opt-icon {
  margin-block-end: 24px;

  li {
    display: flex;
    align-items: center;
    gap: 8px;

    &:nth-child(n + 2) {
      margin-block-start: 8px;
    }
  }
}

// card option text
// ==========================================
.cds-card__opt-text {
  margin-block-end: 24px;

  // display: grid;
  // grid-template-columns: auto 1fr;
  // gap: 8px;

  & > div {
    display: flex;
    gap: 8px;
  }

  dt {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
  }
}

// card option buttons
// ==========================================
.cds-card__opt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

// avatar
// ==========================================
.cds-card__avatar {
  margin-block-end: 24px;
}

// card all have option
// ==========================================
.cds-card-all {
  $this: '.cds-card';

  &#{$this}--image #{$this}__img {
    border-radius: $radius;
  }

  &#{$this}--image-full #{$this}__img {
    border-radius: $radius $radius 0 0;
  }

  &#{$this}--image-full #{$this}__categories,
  &#{$this}--image-full #{$this}__title,
  &#{$this}--image-full #{$this}__description {
    padding-inline: 24px;
  }

  // #{$this}__content {
  //   margin-block-start: 24px;
  // }
}