@layer components {
    article.invoice {
        background-color: var(--color--brand--white);
        padding: var(--space-l) var(--space-m);
        box-shadow: var(--color--brand--90) 0.25rem 0.25rem 0.5rem;

        font-family: var(--font--caption--family--medium);
        font-size: var(--font--caption--size--medium);
        font-weight: var(--font--caption--weight--medium);
        line-height: var(--font--caption--line-height--medium);
        letter-spacing: var(--font--caption--letter-spacing--medium);
        text-transform: var(--font--caption--casing--medium);

        & header {
            display: block;
            border-bottom: none;
            justify-content: space-between;
            align-items: start;

            & .studio-brand {
                width: 100%;
                margin: 0 auto var(--space-l);

                & .studio-logo {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 3 / 1;
                }
            }
        }

        & ol.items {
            margin: 0;
            padding: 0;
            list-style-type: none;

            width: 100%;
            display: grid;
            grid-column: span 3;
            counter-reset: list;
            margin-bottom: var(--space-l);

            & li {
                grid-column: span 3;
                display: grid;
                align-items: center;
                grid-template-columns: 3rem 1fr 8rem;
                grid-template-rows: repeat(3, auto);
                grid-template-areas:
                    "number      line-name   line-date"
                    "line-price  line-price  line-total"
                    "description description description";

                &.flat-rate {
                    grid-template-areas:
                        "number      line-name   line-date"
                        "line-total  line-total  line-total"
                        "description description description";
                }
            }

            &.omitting-date {
                & li {
                    grid-template-areas:
                        "number      line-name   line-name"
                        "line-price  line-price  line-total"
                        "description description description";
                    
                    &.flat-rate {
                        grid-template-areas:
                            "number      line-name   line-total"
                            "description description description";
                    }
                }

                &.omitting-description {
                    & li {
                        grid-template-areas:
                            "number      line-name   line-name"
                            "line-price  line-price  line-total";

                        &.flat-rate {
                            grid-template-areas:
                                "number      line-name   line-name"
                                "line-total  line-total  line-total";
                        }
                    }
                }
            }

            &.omitting-description {
                & li {
                    grid-template-rows: repeat(2, auto);
                    grid-template-areas:
                        "number      line-name   line-date"
                        "line-price  line-price  line-total";
                    
                    &.flat-rate {
                        grid-template-areas:
                            "number      line-name   line-date"
                            "line-total  line-total  line-total";
                    }
                }
            }

            &.omitting-description {
                & li.flat-rate {
                    & .service-name {
                        /* grid-column: span 2; */
                    }
                }
            }

            & li.flat-rate {
                & .description {
                    /* grid-column: span 2; */
                }
            }

            & li {
                display: grid;
                counter-increment: list;
                align-items: stretch;
                column-gap: 0;
                row-gap: 0;

                & span, &::before {
                    display: flex;
                    align-items: center;
                }

                & span {
                    padding-block: var(--space-s);
                }

                &::before {
                    padding-top: 0.15rem;
                    content: counter(list);
                    text-align: center;
                    grid-area: number;
                    width: 100%;
                    justify-content: center;
                }

                &:not(:first-child) {
                    & > * {
                        border-top-style: none;
                    }
                }

                & .knurling, & .number, & .options {
                    border-style: none;
                }

                & .number {
                    grid-area: number;
                    text-align: center;
                }

                & .calendar {
                    grid-area: line-date;
                    text-align: right;
                    justify-content: end;
                    width: 100%;
                }

                & .price {
                    grid-area: line-total;
                    text-align: right;
                    justify-content: end;
                    width: 100%;
                }

                & .service-name {
                    grid-area: line-name;
                    padding-left: var(--space-s);
                }

                & .rate {
                    grid-area: line-price;
                }

                & .description {
                    grid-area: description;
                    white-space: pre-wrap;
                }
            }
        }
    }

    section.metadata {
        margin-block: var(--space-2xl) var(--space-2xl);
        
        & h3 {
            margin-bottom: var(--space-xs);

            font-family: var(--font--title--family--xsmall);
            font-size: var(--font--title--size--xsmall);
            font-weight: var(--font--title--weight--xsmall);
            line-height: var(--font--title--line-height--xsmall);
            text-transform: var(--font--title--casing--xsmall);
            letter-spacing: var(--font--title--letter-spacing--xsmall);
        }

        & h4 {
            font-size: var(--font--title--family--small);
            font-size: var(--font--title--size--small);
            font-weight: var(--font--title--weight--small);
            line-height: var(--font--title--line-height--small);
            text-transform: var(--font--title--casing--small);
            letter-spacing: var(--font--title--letter-spacing--small);
        }
           
        & dl {
            grid-template-columns: 8rem 1fr;
            column-gap: var(--space-m);
            & div {
                line-height: 1.35;
                margin-bottom: var(--space-2xs);

                & dd {
                    white-space: pre-wrap;
                }
            }
        }
    }

    section.summary {
        display: grid;
        margin-bottom: var(--space-2xl);

        & div {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-content: space-between;
            align-items: center;

            & dd {
                text-align: right;
            }
        }

        div.total {
            border-top: solid var(--size--border) var(--color--border);
            grid-column: span 2;
            margin-block: var(--space-s) var(--space-xl);
            padding-top: var(--space-2xs);

            & dt {
                font-size: var(--font--title--family--small);
                font-size: var(--font--title--size--small);
                font-weight: var(--font--title--weight--small);
                line-height: var(--font--title--line-height--small);
                text-transform: var(--font--title--casing--small);
                letter-spacing: var(--font--title--letter-spacing--small);
            }

            & dd {
                font-size: var(--font--title--family--medium);
                font-size: var(--font--title--size--medium);
                font-weight: var(--font--title--weight--medium);
                line-height: var(--font--title--line-height--medium);
                text-transform: var(--font--title--casing--medium);
                letter-spacing: var(--font--title--letter-spacing--medium);
            }
        }
    }

    dl.invoice-info {
        column-gap: var(--space-xs);
        row-gap: var(--space-2xs);
        & div {
            & dd {
                text-align: right;
            }
        }
    }

    section.note {
        h3 {
            margin-bottom: var(--space-xs);
        }

        p {
            white-space: pre-wrap;
        }
    }

    @media print, screen and (min-width: 600px) {
        article.invoice {
            order: -1;
            grid-column: span 2;
            width: 960px;
            min-height: 1246px;
            margin: auto;
            padding: 48px;
            

            @media screen {
                zoom: 53%;
            }

            & ol.items {
                display: grid;
                grid-template-columns: 1fr;

                & li {
                    grid-template-areas: "number line-date line-name description line-price line-total";
                    grid-template-columns: 1fr 2fr 4fr 8fr 4fr 3fr;
                    grid-template-rows: auto;

                    &.flat-rate {
                        grid-template-areas: "number line-date line-name description line-total";
                        grid-template-columns: 1fr 2fr 4fr 12fr 3fr;
                    }

                    & span {
                        align-items: start;
                    }

                    &::before {
                        align-items: start;
                    }
                }

                &.omitting-date {
                    li {
                        grid-template-areas: "number line-name description line-price line-total";
                        grid-template-columns: 1fr 4fr 10fr 4fr 3fr;

                        &.flat-rate {
                            grid-template-areas: "number line-name description line-total";
                            grid-template-columns: 1fr 4fr 14fr 3fr;
                        }
                    }

                    &.omitting-description li {
                        grid-template-areas: "number line-name line-price line-total";
                        grid-template-columns: 1fr 14fr 4fr 3fr;

                        &.flat-rate {
                            grid-template-areas: "number line-name line-total";
                            grid-template-columns: 1fr 18fr 3fr;
                        }
                    }
                }

                &.omitting-description li {
                    grid-template-areas: "number line-date line-name line-price line-total";
                    grid-template-columns: 1fr 2fr 12fr 4fr 3fr;
                    &.flat-rate {
                        grid-template-areas: "number line-date line-name line-total";
                        grid-template-columns: 1fr 2fr 16fr 3fr;
                    }
                }

                &.omitting-description {
                    & li.flat-rate {
                        & .service-name {
                            /* grid-column: span 2; */
                        }
                    }
                }

            }

            & header {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                column-gap: var(--space-m);

                & div {
                    grid-column: span 2;
                    display: flex;
                    align-items: start;
                    justify-content: space-between;
                }

                & div.studio-brand {
                    grid-column: span 1;
                    img {
                        align-self: center;
                        max-width: 100%;
                    }
                }

                & div.studio-info {
                    padding-block: var(--space-xs);
                }

                & dl.invoice-info {
                    padding-block: var(--space-xs);
                    grid-template-columns: repeat(2, 1fr);
                    row-gap: var(--space-3xs);
                    grid-auto-rows: 1.4em;

                    & div {
                        grid-column: span 2;
                        display: grid;
                        grid-template: subgrid / subgrid;
                        align-items: center;
                    }

                    & div.invoiceNo {
                        grid-row: span 2;
                    }
                }
            }

            section.metadata {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                column-gap: var(--space-m);
                row-gap: var(--space-l);

                & > div {
                    max-width: 100%;
                    grid-column: span 2;
                    column-gap: var(--space-s);
                    row-gap: 0;

                    &.billTo, &.shipTo, &.shippingDetails {
                        row-gap: var(--space-3xs);

                        & dl {
                            display: grid;
                            grid-template-columns: auto 1fr;
                            align-items: start;

                            & div {
                                align-items: start;
                                display: grid;
                                grid-template-columns: subgrid;
                                margin: 0;

                                dd {
                                    /* text-overflow: ellipsis; */
                                    overflow: hidden;
                                    overflow-wrap: break-word;
                                }
                            }
                        }
                    }
                }

                & div.client {
                    grid-column: span 2;
                }

                & div.project {
                    grid-column: span 4;
                }

                & div.billTo {
                    grid-column: span 6;

                    & dl {
                        grid-template-columns: auto 1fr auto 1fr auto 1fr;
                        grid-template-rows: repeat(3, auto);
                        grid-auto-flow: column;

                        & div.address, div.tracking {
                            grid-row: span 3;
                        }
                    }

                    &:has(+ div.shipTo) {
                        grid-column: span 2;

                        & dl {
                            grid-template-columns: auto 1fr;
                            grid-template-rows: repeat(4, auto);

                            & div.address, div.tracking {
                                grid-row: span 1;
                            }
                        }
                    }

                    &:has(+ div.shippingDetails) {
                        grid-column: span 4;

                        & dl {
                            grid-template-columns: auto 1fr auto 1fr;
                            grid-template-rows: repeat(4, auto);

                            & div.address, div.tracking {
                                grid-row: span 3;
                            }
                        }

                    }
                }

                & div.shipTo {
                    grid-column: span 4;

                    & dl {
                        grid-template-columns: auto 1fr auto 1fr;
                        grid-template-rows: repeat(3, auto);
                        grid-auto-flow: column;

                        & div.address, div.tracking {
                            grid-row: span 3;
                        }
                    }

                    &:has(+ div.shippingDetails) {
                        grid-column: span 2;

                        & dl {
                            grid-template-columns: auto 1fr;
                            grid-template-rows: repeat(4, auto);

                            & div.address, div.tracking {
                                grid-row: span 1;
                            }
                        }
                    }
                }
            }

            section.summary {
                justify-content: end;
                display: flex;
                margin-top: var(--space-l);
                padding-top: var(--space-s);

                & dl {
                    justify-content: end;
                }

                & .row {
                    grid-column: 8 / span 5;
                    display: grid;
                    grid-template-columns: 3fr 2fr;

                    & p {
                        grid-column: span 2;
                    }

                    /* TODO: Remove this when we support adjustment notes */
                    & div {
                        grid-column-start: 2;
                    }
                }
            }

            .calculated-subtotal {
                grid-column-start: 4;
                margin-top: var(--space-m);
            }

            .total {
                grid-column: 7 / -1;
            }

            div.studio-info {
                display: flex;
                column-gap: var(--space-l);
            }

            footer {
                display: flex;
                justify-content: space-between;
                align-items: end;

                & section.note {
                    min-width: 15rem;

                    & h3 {
                        padding-bottom: var(--space-2xs);
                        border-bottom: solid var(--size--border) var(--color--border);
                    }

                    & p {
                        margin-bottom: 0;
                    }

                    & p:has(+ p) {
                        margin-bottom: var(--space-m);
                    }
                }
            }
        }
    }

    @media screen and (min-width: 650px) {
        article.invoice {
            zoom: 58%;
        }
    }

    @media screen and (min-width: 700px) {
        article.invoice {
            zoom: 63%;
        }
    }

    @media screen and (min-width: 750px) {
        article.invoice {
            zoom: 68%;
        }
    }

    @media screen and (min-width: 800px) {
        article.invoice {
            zoom: 73%;
        }
    }

    @media screen and (min-width: 850px) {
        article.invoice {
            zoom: 78%;
        }
    }

    @media screen and (min-width: 900px) {
        article.invoice {
            zoom: 83%;
        }
    }

    @media screen and (min-width: 950px) {
        article.invoice {
            zoom: 89%;
        }
    }

    @media screen and (min-width: 1000px) {
        article.invoice {
            zoom: 57%;
        }
    }

    @media screen and (min-width: 1050px) {
        article.invoice {
            zoom: 62%;
        }
    }

    @media screen and (min-width: 1100px) {
        article.invoice {
            zoom: 67%;
        }
    }

    @media screen and (min-width: 1150px) {
        article.invoice {
            zoom: 73%;
        }
    }

    @media screen and (min-width: 1200px) {
        article.invoice {
            zoom: 78%;
        }
    }

    @media screen and (min-width: 1250px) {
        article.invoice {
            zoom: 83%;
        }
    }

    @media screen and (min-width: 1300px) {
        article.invoice {
            zoom: 88%;
        }
    }

    @media screen and (min-width: 1350px) {
        article.invoice {
            zoom: 94%;
        }
    }

    @media screen and (min-width: 1400px) {
        article.invoice {
            zoom: 99%;
        }
    }

    @media print, screen and (min-width: 1415px) {
        article.invoice {
            zoom: 100%;
        }
    }

    /*
    * Print notes:
    * US Letter: 8.5in x 11in (816px x 1056px)
    * A4: 210mm x 297mm (793.8px x 1122.66)
    * Don't scale
    * What to do about font sizes?
    */
}

@media screen and (max-width: 599px) {
    article.invoice {
        & .studio-info, & footer > address, & footer > .contact {
            display: none;
        }

        & header dl {
            & .invoiceNo {
                & dt {
                    font-family: var(--font--title--family--xsmall);
                    font-size: var(--font--title--size--xsmall);
                    font-weight: var(--font--title--weight--xsmall);
                    line-height: var(--font--title--line-height--xsmall);
                    letter-spacing: var(--font--title--letter-spacing--xsmall);
                    text-transform: var(--font--title--casing--xsmall);
                }

                & dd {
                    font-family: var(--font--title--family--large);
                    font-size: var(--font--title--size--large);
                    font-weight: var(--font--title--weight--large);
                    line-height: var(--font--title--line-height--large);
                    letter-spacing: var(--font--title--letter-spacing--large);
                    text-transform: var(--font--title--casing--large);
                }
            }
        }

        & h3 {
            text-transform: none !important;
            border-bottom: solid var(--size--border) var(--color--border);
            padding-bottom: var(--space-xs);
        }

        & h4 {
            margin-bottom: var(--space-xl);

            font-family: var(--font--title--family--large);
            font-size: var(--font--title--size--large);
            font-weight: var(--font--title--weight--large);
            line-height: var(--font--title--line-height--large);
            letter-spacing: var(--font--title--letter-spacing--large);
            text-transform: var(--font--title--casing--large);
        }

        & ol li {
            border: none;

            &::before {
                font-size: 2rem;
                font-family: var(--font--family--sans);
                font-weight: 400;
                line-height: 1;
                border-right: solid var(--size--border) var(--color--border);
            }

            & > *, &::before {
                border-top: solid var(--size--border) var(--color--border);
            }

            & .description {
                border-bottom: solid var(--size--border) var(--color--border);
                border-top: solid var(--size--border) var(--color--brand--90);
            }

            &.flat-rate {
                & .description {
                    border-top: solid var(--size--border) var(--color--border);
                }
            }

            &:not(:last-of-type) {
                & .description {
                    border-bottom: none;
                }
            }
        }

        & .summary {
            & dt, & div.total dt  {
                font-family: var(--font--title--family--xsmall);
                font-size: var(--font--title--size--xsmall);
                font-weight: var(--font--title--weight--xsmall);
                line-height: var(--font--title--line-height--xsmall);
                letter-spacing: var(--font--title--letter-spacing--xsmall);
                text-transform: var(--font--title--casing--xsmall);
            }
        }

        & section.note p {
            font-family: var(--font--caption--family--medium);
            font-size: var(--font--caption--size--medium);
            font-weight: var(--font--caption--weight--medium);
            line-height: var(--font--caption--line-height--medium);
            letter-spacing: var(--font--caption--letter-spacing--medium);
            text-transform: var(--font--caption--casing--medium);
        }
    }
}