/*
 * Shared face-card primitive.
 *
 * Rendering follows the July preflop/c-bet cards: separate rank and suit in
 * opposite corners, a light card surface, and restrained elevation. DS-19
 * adds CardBack as a separate primitive for hidden TableSeat cards.
 */

.ds-card-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ds-card-back {
  --_ds-card-back-width: var(--ds-size-card-seat-width);
  --_ds-card-back-height: var(--ds-size-card-seat-height);

  width: var(--_ds-card-back-width);
  height: var(--_ds-card-back-height);
  display: inline-block;
  flex: none;
  border: 1px solid color-mix(
    in srgb,
    var(--ds-color-card-back-secondary) 72%,
    var(--ds-color-card-surface)
  );
  border-radius: 4px;
  background: repeating-linear-gradient(
    135deg,
    var(--ds-color-card-back-primary) 0,
    var(--ds-color-card-back-primary) 4px,
    var(--ds-color-card-back-secondary) 4px,
    var(--ds-color-card-back-secondary) 8px
  );
  user-select: none;
}

.ds-playing-card {
  --_ds-card-width: var(--ds-size-card-task-width);
  --_ds-card-height: var(--ds-size-card-task-height);
  --_ds-card-radius: 7px;
  --_ds-card-padding-block: 5px;
  --_ds-card-padding-inline: 6px;
  --_ds-card-rank-size: 16px;
  --_ds-card-suit-size: 15px;

  width: var(--_ds-card-width);
  height: var(--_ds-card-height);
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--_ds-card-padding-block) var(--_ds-card-padding-inline);
  border: 1px solid color-mix(
    in srgb,
    var(--ds-color-card-ink) 18%,
    var(--ds-color-card-surface)
  );
  border-radius: var(--_ds-card-radius);
  background: var(--ds-color-card-surface);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--ds-color-card-ink) 25%, transparent);
  color: var(--ds-color-card-ink);
  font-family: var(--ds-font-family-sans);
  font-weight: 700;
  line-height: 1;
  text-align: start;
  user-select: none;
}

.ds-playing-card--table {
  --_ds-card-width: var(--ds-size-card-table-width);
  --_ds-card-height: var(--ds-size-card-table-height);
  --_ds-card-rank-size: 17px;
  --_ds-card-suit-size: 16px;
}

.ds-playing-card--mini {
  --_ds-card-width: var(--ds-size-card-mini-width);
  --_ds-card-height: var(--ds-size-card-mini-height);
  --_ds-card-radius: 5px;
  --_ds-card-padding-block: 3px;
  --_ds-card-padding-inline: 4px;
  --_ds-card-rank-size: 13px;
  --_ds-card-suit-size: 12px;
}

.ds-playing-card.is-red {
  color: var(--ds-color-card-red);
}

.ds-playing-card-rank {
  font-size: var(--_ds-card-rank-size);
}

.ds-playing-card-suit {
  align-self: flex-end;
  font-size: var(--_ds-card-suit-size);
}