@layer components {

  /* ─── E-invoicing cards ─────────────────── */

  /* A card asking for a proof offers two ways on, side by side. */
  .peppol-card .account-card__actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* The document for the team's review, and the button that sends it. */
  .peppol-card__upload {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  /* What stands in the way: another account holding the DIČ, or a failed
     registration. One class more than the subtitle it restyles. */
  .peppol-card .peppol-card__warning {
    color: var(--color-warning);
  }

  /* ─── The editor's delivery section ─────── */

  .inv-delivery {
    display: grid;
    gap: 0.5rem;
  }

  /* The mailing kept with the address above it, a part apart from the
     e-invoice: 2rem with the grid's gap. */
  .inv-delivery--email-first > :first-child {
    margin-block-end: 1.5rem;
  }

  /* The e-invoice button, which opens into the confirmation in its place:
     the `<details>` is the shape — the purple pill closed, the white card
     with the purple rim open — so the colours and the corners turn from one
     to the other while the summary folds away and the text unfolds under
     it. The heights animate where the browser can interpolate `auto`
     (`interpolate-size`), and snap where it can't. */
  .inv-delivery__send {
    --send-duration: 0.3s;

    background: var(--color-brand-fill);
    border: 1.5px solid var(--color-brand-fill);
    border-radius: var(--radius-xl);
    interpolate-size: allow-keywords;
    overflow: hidden;
    transition: background var(--send-duration), border-color var(--send-duration), border-radius var(--send-duration);

    &:hover:not([open]) {
      background: var(--color-brand-fill-strong);
      border-color: var(--color-brand-fill-strong);
    }

    &::details-content {
      block-size: 0;
      transition: block-size var(--send-duration), content-visibility var(--send-duration) allow-discrete;
    }

    &[open] {
      background: var(--color-surface);
      border-color: var(--color-brand);
      border-radius: var(--radius-lg);

      &::details-content {
        block-size: auto;
      }
    }
  }

  /* The pill's face. Its colours are the `<details>`'s, so the button
     primitive paints none of its own. */
  .inv-delivery__send-button {
    background: none;
    border: none;
    color: var(--color-ink-inverted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem;
    transition: block-size var(--send-duration), opacity var(--send-duration), padding var(--send-duration);

    .inv-delivery__send[open] & {
      block-size: 0;
      opacity: 0;
      padding-block: 0;
    }
  }

  .inv-delivery__confirm {
    opacity: 0;
    padding: 1rem;
    transform: translateY(-0.25rem);
    transition: opacity 0.25s 0.1s, transform 0.25s 0.1s;

    .inv-delivery__send[open] & {
      opacity: 1;
      transform: none;

      @starting-style {
        opacity: 0;
        transform: translateY(-0.25rem);
      }
    }
  }

  .inv-delivery__confirm-text {
    color: var(--color-ink);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem;
  }

  .inv-delivery__confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  /* While the network is asked whether the client receives, and while the
     e-invoice is on its way: the disabled sidebar button with a brand sheen
     sweeping across it, left to right. The gradient is three times the
     button's width with the sheen in its middle third, so both ends of the
     sweep sit off the button and the loop has no seam. One class more than
     `.inv-sidebar__btn:disabled`, whose `background` it paints over. */
  .inv-delivery .inv-delivery__busy:disabled {
    &, &:hover {
      animation: inv-delivery-busy 1.8s linear infinite;
      background: linear-gradient(90deg,
        var(--color-canvas) 35%, color-mix(in oklch, var(--color-brand) 22%, var(--color-canvas)) 50%, var(--color-canvas) 65%);
      background-size: 300% 100%;
      color: var(--color-ink-muted);
    }
  }

  @keyframes inv-delivery-busy {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
  }

  /* Why the e-invoice can't go, listed as a form lists what it was refused
     for — the error tint, a line each — in a bubble over the disabled
     button while the pointer rests on it. The button is disabled, so the
     bubble opens on its wrapper's hover; a screen reader hears it through
     the button's `aria-describedby`. */
  .inv-delivery__blocked {
    position: relative;
  }

  .inv-delivery__why {
    background: var(--color-negative-tint);
    border-color: var(--color-negative-border);
    color: var(--color-negative-strong);
    font-size: 0.8125rem;
    inset-block-end: calc(100% + 0.5rem);
    inset-inline: 0;
    line-height: 1.45;
    opacity: 0;
    padding: 0.625rem 0.875rem;
    pointer-events: none;
    transition: opacity 0.15s;

    .inv-delivery__blocked:hover & {
      opacity: 1;
    }
  }

  .inv-delivery__why-title {
    font-weight: 600;
    margin: 0 0 0.25rem;
  }

  .inv-delivery__why-list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding-inline-start: 1.25rem;
  }

  /* The e-invoice delivered: shaped like the button it was, in the
     positive green, saying so — not a control, so nothing to press. One
     class more than `.inv-sidebar__btn`, whose colours it paints over. */
  .inv-delivery .inv-delivery__delivered {
    &, &:hover {
      background: var(--color-positive-tint);
      border-color: var(--color-positive);
      color: var(--color-positive);
      cursor: default;
      font-weight: 600;
      margin: 0;
    }
  }

  .inv-delivery__note {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0;
  }

  .inv-delivery__note--warning {
    color: var(--color-warning);
  }
}