/*
 * A list of rows with an icon, a label and a chevron: the account screen.
 *
 * The list clips its rounded corners (overflow: hidden), so the focus ring of a row is drawn inside the row, along its
 * edge; a ring outside the row would be cut off.
 */

@layer components {
  .list {
    margin: var(--s-3) var(--s-4);
    padding: 0;
    overflow: hidden;
    list-style: none;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }

  .list > li {
    border-bottom: 1px solid var(--border);
  }

  .list > li:last-child {
    border-bottom: 0;
  }

  .list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    min-height: 56px;
    padding: var(--s-1) var(--s-4);
    color: var(--text);
    font-size: 1rem;
    text-decoration: none;
  }

  /* The line under a row is part of the row, as the design draws it (56px with its line): the row itself is 1px less. */
  .list > li:not(:last-child) > .list__item {
    min-height: 55px;
  }

  .list__item:focus-visible {
    outline-offset: -3px;
  }

  /* Pressed: the row answers the finger at once, as the dishes do. */
  .list__item:active {
    background: var(--surface-2);
  }

  /* The first and the last row have the rounded corners of the list, so the ring follows them. */
  .list > li:first-child > .list__item {
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
  }

  .list > li:last-child > .list__item {
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
  }

  .list__label {
    flex: 1;
  }

  .list__value {
    color: var(--muted);
    font-size: 0.9375rem;
  }

  /* A row that says two things, one under the other (an address: the street, and the postal code and place muted under it). */
  .list__label--stacked {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
  }

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

  /* What goes under a list: the button to add a row, or the sentence that says no more fit. */
  .list-action {
    margin: var(--s-3) var(--s-4);
  }

  .list-note {
    margin: var(--s-3) var(--s-4);
    color: var(--muted);
    font-size: 0.875rem;
    text-align: center;
  }

  /*
   * The rows that the header (Info) and the footer (the language) of the website already offer: not on the desktop. The login page has them
   * in a list of their own (list--site), the account page among its other rows (list__row--site, the last ones of the list): the row before
   * them is then the last that is shown, so it has no line under it and the rounded corners of the card, as a last row has.
   */
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .list--site {
      display: none;
    }

    .list__row--site {
      display: none;
    }

    .list > li:has(+ .list__row--site) {
      border-bottom: 0;
    }

    .list > li:has(+ .list__row--site) > .list__item {
      min-height: 56px;
      border-bottom-left-radius: var(--r-lg);
      border-bottom-right-radius: var(--r-lg);
    }
  }

  /* Logout: set apart, in red. */

  .list__item--danger {
    color: var(--spice);
    font-weight: 700;
  }

  /* The language switch: two links that look like a segmented control. */
  .segmented {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 2px;
    padding: 2px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
  }

  .segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 var(--s-3);
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* The ring stays within the room around the items (2px of the control and the rest of the row), which the list would otherwise clip. */
  .segmented__item:focus-visible {
    outline-offset: 0;
  }

  .segmented__item[aria-current='true'] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-1);
  }

  .segmented__item:active {
    opacity: 0.6;
  }

  .greeting {
    margin: var(--s-2) var(--s-4) 0;
    font-size: 1.625rem;
    overflow-wrap: anywhere;
  }

  .muted {
    color: var(--muted);
    font-size: 0.875rem;
    overflow-wrap: anywhere; /* an e-mail address has no place to break */
  }
}