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

:root {
  --board-card-aspect-ratio-4-3: 4/3;
  --board-card-aspect-ratio-4-3: 1/1;
  --board-card-radius: 16px;
}

$tag-height: 26px;

.cds-board-card {
  $this: &;

  display: flex;
  flex-direction: column;
  gap: 20px;

  &__title-contents {
    color: var(--gray-400);
    font-size: var(--font-size-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__thumbnail {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--board-card-radius);
    margin-bottom: 4px;
  }

  &__categories {
    display: flex;
    gap: 8px;
    align-items: center;
    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 {
    font-size: var(--font-size-5);
    color: var(--secondary-gray-blue-700);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    line-height: #{token.$line-heights-5}px;

    &--truncate {
      @include abstract.ellipsis(2);
    }
  }

  &__new-icon,
  &__file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    font-size: 0;
  }

  &__new-icon {
    svg {
      transform: translateY(1px);
    }
  }

  &__file-icon {
    background-color: var(--gray-100);
    border-radius: 4px;
    transform: translateY(-1px);
  }

  &__sub-title {
    @include abstract.ellipsis(3);
  }

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

  &__tags {
    flex-wrap: wrap;
    display: flex;
    gap: 8px;
    row-gap: 4px;

    &--truncate {
      overflow: hidden;
      max-height: $tag-height;
    }
  }

  &__tag {
    gap: 8px;
  }

  &__tag-item {
    font-size: var(--font-size-1);
    color: var(--gray-400);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
    line-height: #{token.$line-heights-8}px;

    display: inline-block;
    margin-right: 8px;

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

  &__icon-label-options {
    font-size: var(--font-size-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--gray-400);

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

  &__text-options {
    font-size: var(--font-size-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--gray-400);

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

  &__text-option-item-title {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
  }

  &__text-option-item-text {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
  }

  .cds-board-card__title-text,
  .cds-board-card__sub-title {
    word-break: break-all;
  }
}

@media (max-width: 768px) {
  .cds-board-card {
    $this: &;

    .cds-board-card > &__thumbnail {
      margin-bottom: 0;
    }

    &__tags {
      &--truncate {
        max-height: $tag-height * 2 + 8px;
      }
    }
  }
}