/* Generated from products/design-system/shared/invoice-repeat by Navorina/scripts/sync-ds-invoice-document.mjs. Do not edit. */
/* Recurring invoices (shared/invoice-repeat.js): the Repeat badge for rows and cards, and the schedule card.
   The product gets a byte-identical copy in css/components/nv-invoice-repeat.css via
   Navorina/scripts/sync-ds-invoice-document.mjs; edit this file only.
     badge      a quiet pill like the invoice status: the repeat icon and the frequency; muted while paused;
                --icon (24 px round) follows the status pill in a table; the next date goes under the due date
     card       title and badge, three facts (every, next invoice, delivery), Pause / Stop, the created list
     history    rows with the soft rounded hover of DS tables; number and date left, amount and status right */
@layer components {
  .nv-o-invoice-repeat {
    display: inline-flex;
    block-size: 24px;
    align-items: center;
    gap: 6px;
    padding-inline: 8px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nv-text-primary, #eeeeee) 8%, transparent);
    color: var(--nv-text-secondary, rgb(238 238 238 / .7));
    font-size: var(--nv-type-footnote-size, 12px);
    font-weight: var(--nv-type-weight-medium, 500);
    line-height: 1;
    white-space: nowrap;
  }
  .nv-o-invoice-repeat svg { flex: none; inline-size: 14px; block-size: 14px; }
  .nv-o-invoice-repeat--icon { inline-size: 24px; justify-content: center; margin-inline-start: 6px; padding: 0; vertical-align: middle; }
  .nv-o-invoice-repeat--paused { color: var(--nv-text-tertiary, rgb(238 238 238 / .5)); }
  .nv-o-invoice-repeat-next {
    color: var(--nv-text-tertiary, rgb(238 238 238 / .5));
    font-size: var(--nv-type-footnote-size, 12px);
    font-variant-numeric: var(--nv-type-numeric-figures, tabular-nums lining-nums);
    white-space: nowrap;
  }

  .nv-o-invoice-schedule {
    display: grid;
    gap: 16px;
    color: var(--nv-text-primary, #eeeeee);
  }
  .nv-o-invoice-schedule__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .nv-o-invoice-schedule__title {
    margin: 0;
    font-size: var(--nv-type-title-3-size, 16px);
    font-weight: var(--nv-type-title-3-weight, 600);
    line-height: var(--nv-type-title-3-line, 24px);
    letter-spacing: var(--nv-type-title-3-tracking, -.011em);
  }
  .nv-o-invoice-schedule__subtitle {
    margin: 4px 0 -8px;
    color: var(--nv-text-tertiary, rgb(238 238 238 / .5));
    font-size: var(--nv-type-footnote-size, 12px);
    font-weight: var(--nv-type-weight-medium, 500);
    line-height: var(--nv-type-footnote-line, 16px);
  }
  .nv-o-invoice-schedule__rows { display: grid; gap: 10px; margin: 0; }
  .nv-o-invoice-schedule__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .nv-o-invoice-schedule__row dt { color: var(--nv-text-tertiary, rgb(238 238 238 / .5)); font-size: var(--nv-type-callout-size, 13px); line-height: var(--nv-type-callout-line, 18px); }
  .nv-o-invoice-schedule__row dd { min-inline-size: 0; margin: 0; font-size: var(--nv-type-body-size, 14px); line-height: var(--nv-type-body-line, 20px); font-variant-numeric: var(--nv-type-numeric-figures, tabular-nums lining-nums); overflow-wrap: anywhere; }
  .nv-o-invoice-schedule__muted { color: var(--nv-text-tertiary, rgb(238 238 238 / .5)); }
  .nv-o-invoice-schedule__note { margin: 0; color: var(--nv-text-secondary, rgb(238 238 238 / .7)); font-size: var(--nv-type-callout-size, 13px); line-height: var(--nv-type-callout-line, 18px); }
  .nv-o-invoice-schedule__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
  .nv-o-invoice-schedule__actions { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Own pill buttons (the invoice pay page's), so the card needs no page button styles. */
  .nv-o-invoice-schedule__button {
    display: inline-flex;
    min-block-size: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--nv-popover-hover, color-mix(in srgb, #888888 16%, #0b0b0c));
    color: var(--nv-text-primary, #eeeeee);
    font: inherit;
    font-size: var(--nv-type-callout-size, 13px);
    font-weight: var(--nv-type-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .nv-o-invoice-schedule__button:hover { background: color-mix(in srgb, var(--nv-text-primary, #eeeeee) 14%, var(--nv-popover-hover, #1c1c1d)); }
  .nv-o-invoice-schedule__button:focus-visible { outline: 2px solid color-mix(in srgb, var(--nv-text-primary, #eeeeee) 50%, transparent); outline-offset: 2px; }
  .nv-o-invoice-schedule__button[aria-disabled="true"] { opacity: .62; cursor: default; }
  .nv-o-invoice-schedule__button[aria-busy="true"] { cursor: progress; }
  .nv-o-invoice-schedule__button--quiet { background: transparent; color: var(--nv-text-secondary, rgb(238 238 238 / .7)); }
  .nv-o-invoice-schedule__button--quiet:hover { background: var(--nv-popover-hover, color-mix(in srgb, #888888 16%, #0b0b0c)); color: var(--nv-text-primary, #eeeeee); }

  .nv-o-invoice-schedule__history { display: grid; gap: 2px; margin: 0 -10px; padding: 0; list-style: none; }
  .nv-o-invoice-schedule__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms ease;
  }
  .nv-o-invoice-schedule__item:hover { background: var(--nv-table-row-hover, color-mix(in srgb, #888888 10%, transparent)); }
  .nv-o-invoice-schedule__item:focus-visible { outline: 2px solid color-mix(in srgb, var(--nv-text-primary, #eeeeee) 50%, transparent); outline-offset: -2px; }
  .nv-o-invoice-schedule__item-main { display: grid; min-inline-size: 0; gap: 2px; font-size: var(--nv-type-callout-size, 13px); line-height: var(--nv-type-callout-line, 18px); }
  .nv-o-invoice-schedule__item-number { font-size: var(--nv-type-body-size, 14px); font-weight: var(--nv-type-weight-medium, 500); line-height: var(--nv-type-body-line, 20px); }
  .nv-o-invoice-schedule__item-end { display: inline-flex; flex: none; align-items: center; gap: 10px; font-size: var(--nv-type-body-size, 14px); font-variant-numeric: var(--nv-type-numeric-figures, tabular-nums lining-nums); }

  @container (max-width: 360px) {
    .nv-o-invoice-schedule__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  }
}