/*
 * The points (Sprint 4, docs/planning/14-loyalty-design.md §4): the gold card that says what an order earns (the cart, later the checkout)
 * and the gold card of the account with the balance. Gold is the colour of points in every look: --gold-soft behind, --gold-text on it.
 */

@layer components {
  /* "Je spaart 27 punten met deze bestelling": the star and a line of text, under the totals (proposal screen 3). */
  .points {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    background: var(--gold-soft);
    color: var(--gold-text);
    font-size: 0.875rem;
    font-weight: 600;
  }

  .points .icon {
    flex: none;
  }

  /* The card puts room above whatever follows something (`.card > * + *`); in this row that would push the text 4px below the middle of the star. */
  .card.points > * + * {
    margin-top: 0;
  }

  /* The card in a block of the checkout form (Spaarpunten): under the choice, in the width of the block. */
  .form-sec > .card.points {
    margin: 0 0 var(--s-2);
  }

  /* The invitation to log in: its bold part is a link, in the colour of the card. */
  .points .text-link {
    color: inherit;
    font-weight: 700;
  }

  /*
   * The gold card of the account and of the history (screen 6, L5-L7): the balance in the display font of the look, what it is worth
   * (or what is missing) under it, and the star. On the account page it is a link to the history, without a chevron.
   */
  .points-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin: var(--s-3) var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--gold-soft);
    color: var(--gold-text);
    text-decoration: none;
  }

  /* The balance is 700 in every look: the proposal sets `.points-card .n` after its rule for the display text (the same as the title of the top bar). */
  .points-card__n {
    font-family: var(--font-display);
    font-style: var(--display-style);
    font-weight: 700;
    font-size: 1.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .points-card__label {
    margin-top: var(--s-1);
    font-weight: 600;
  }

  .points-card__star {
    flex: none;
    width: 2rem;
    height: 2rem;
  }

  a.points-card:active {
    filter: brightness(0.96);
  }

  @media (hover: hover) and (pointer: fine) {
    a.points-card:hover {
      filter: brightness(0.97);
    }
  }

  /* The history: a row says what happened and when, and the points stand right of it, bold, in figures of one width. A row is 64px with its
     line, as the design draws it (the line is part of the row, as in the list of the account). */
  .list.ledger > li > .list__item {
    min-height: 64px;
    padding-block: 0;
  }

  .list.ledger > li:not(:last-child) > .list__item {
    min-height: 63px;
  }

  /* A correction of the restaurant has no order to open: a row without a link, which the finger does not answer, and the room of the chevron
     that the other rows have, so that the points stand in one column. */
  .list__item--plain:active {
    background: transparent;
  }

  .ledger__pad {
    flex: none;
    width: 1rem;
  }

  /* What a row says takes the lines of the drawing (a pitch of 1.125 and 1.214, 18px and 17px), and a line stands in a box of the 1.5 that the shop's rows
     always had: a row of one line is as it was, to the pixel, and a title that wraps (the reason of a correction of the restaurant, up to 120 characters)
     is as tight as the drawing's C3 instead of 24px a line. The row has no padding above and below: its height is its minimum unless the text is more. */
  .ledger__what {
    display: flex;
    align-items: center;
    min-height: 1.5em;
    font-weight: 600;
    line-height: 1.125;
  }

  .ledger__when {
    display: flex;
    align-items: center;
    min-height: 1.5em;
    color: var(--muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2143;
  }

  .ledger__no {
    white-space: nowrap;
  }

  .ledger__amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* No points yet (L7): a title and a sentence, centred, under the card. */
  .points-empty {
    margin: var(--s-5) var(--s-4) 0;
    text-align: center;
  }

  .points-empty__title {
    margin-bottom: var(--s-1);
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .points-empty__text {
    color: var(--muted);
    font-size: 0.875rem;
  }

  /* "Zo werkt het": the rules of the settings, a few short sentences in a card (the card spaces them). */
  .howto__title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
  }

  .howto p {
    color: var(--muted);
    font-size: 0.875rem;
  }
}