@use 'sprucecss/scss/spruce' as *;

@page {
  margin: 0;
  size: A4 portrait;
}

.invoice {
  background-color: color('background');
  border-radius: config('border-radius-lg', $display);
  box-shadow: 0 0 2.5rem hsl(0deg 0% 0% / 2.5%);
  display: flex;
  flex-direction: column;
  gap: spacer('m');
  padding: spacer-clamp('m', 'l');

  @media print {
    block-size: 29.7cm;
    box-shadow: none;
    inline-size: 21cm;
    padding: 1.25cm;
    -webkit-print-color-adjust: exact;
  }

  &__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('s') spacer('m');
    justify-content: space-between;
  }

  &__logo {
    --size: 2.5rem;
    block-size: var(--size);
    inline-size: var(--size);
  }

  &__title {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: spacer('xs');
    line-height: 1;
    margin-block: 0;
  }

  &__serial-number {
    background-color: color('secondary');
    border-radius: config('border-radius-sm', $display);
    color: hsl(0deg 0% 100%);
    font-size: config('font-size-base', $typography);
    padding-block: spacer('xxs');
    padding-inline: spacer('xs');
    text-align: center;
  }

  &__highlighted {
    @include clear-list;
    background-color: color('stripe', 'table');
    border-radius: config('border-radius-sm', $display);
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs') spacer('m');
    justify-content: flex-end;
    padding-block: spacer('s');
    padding-inline: spacer('m');

    > li {
      + li {
        margin-block-start: 0;
      }
    }
  }

  &__meta {
    display: flex;
    flex-direction: column;
    gap: spacer('m');
    justify-content: space-between;

    @include breakpoint('xs') {
      flex-direction: row;
    }

    address {
      font-style: normal;
    }
  }

  &__meta-block {
    @include layout-stack('s');

    h2 {
      font-size: font-size('h3');
    }

    &--align-end {
      @include breakpoint('xs') {
        text-align: end;
      }
    }
  }

  &__footer {
    align-items: center;
    border-block-start: 1px solid color('border');
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: spacer('xs') spacer('m');
    justify-content: space-between;
    margin-block-start: auto;
    padding-block-start: spacer('m');

    @include breakpoint('xs') {
      flex-direction: row;
    }

    &-logo {
      --size: 2rem;
      block-size: var(--size);
      inline-size: var(--size);
    }

    a {
      color: color('text');
      text-decoration: none;
    }
  }

  &__table {
    margin-block-end: spacer('m');

    td,
    th {
      @media print {
        padding: 0.3cm;
      }
    }

    .summary-row {
      background-color: transparent !important;

      th,
      td {
        padding-block: spacer('s') 0;
      }

      th {
        text-align: end;
      }
    }
  }
}

<div class="invoice">
    <div class="invoice__header">
        <a href="#">
            <img class="invoice__logo" src="/img/cone-logo.svg" alt="Cone" height="48" width="48"/>
        </a>
        <h1 class="invoice__title">
            Invoice
            <span class="invoice__serial-number">SN: 123456789</span>
        </h1>
    </div>
    <ul class="invoice__highlighted">
        <li>
            Payment type: <strong>Transfer</strong>
        </li>
        <li>
            Created: <strong>January 13, 2023</strong>
        </li>
        <li>
            Due: <strong>January 20, 2023</strong>
        </li>
    </ul>
    <div class="invoice__meta">
        <div class="invoice__meta-block">
            <h2>Invoiced to</h2>
            <address>
                Mavis Schmeler <br/>
                1904 Coolidge St <br/>
                Brownsville, Texas 78521 <br/>
                United States <br/>
            </address>
        </div>
        <div class="invoice__meta-block invoice__meta-block--align-end">
            <h2>Pay to</h2>
            <address>
                <strong>Miller, Romaguera and Spinka</strong> <br/>
                853 Burwell Heights Road <br/>
                Nederland, Texas 77627 <br/>
                United States <br/>
                <strong>EIN:</strong> 25-3243963 <br/>
                <strong>Bank Account Number:</strong> 23961707
            </address>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table--rounded table--striped table--clear-border invoice__table">
            <thead>
                <tr>
                    <th scope="col">Item</th>
                    <th scope="col">Qty</th>
                    <th scope="col">Price</th>
                    <th scope="col">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Product #1234</td>
                    <td>1</td>
                    <td>$500.00</td>
                    <td>$500.00</td>
                </tr>
                <tr>
                    <td>Product #1235</td>
                    <td>2</td>
                    <td>$250.00</td>
                    <td>$500.00</td>
                </tr>
                <tr>
                    <td>Product #1236</td>
                    <td>4</td>
                    <td>$100.00</td>
                    <td>$400.00</td>
                </tr>
                <tr class="summary-row">
                    <th colspan="3" scope="row">Sub Total:</th>
                    <td>$1400.00</td>
                </tr>
                <tr class="summary-row">
                    <th colspan="3" scope="row">Tax:</th>
                    <td>27%</td>
                </tr>
                <tr class="summary-row">
                    <th colspan="3" scope="row">Total:</th>
                    <td>$1778.00</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="invoice__footer">
        <img class="invoice__footer-logo" src="/img/cone-logo.svg" alt="Cone" height="48" width="48"/>
        <a href="mailto:hello@conedevelopment.com">hello@conedevelopment.com</a>
        <a href="tel:+1-512-555-5555">+1-512-555-5555</a>
    </div>
</div>