@layer components {
    form#invoice {
        margin-bottom: 0;
    }

    div.invoice-form {
        & header {
            display: block;
            border-bottom: none;
            align-items: start;

            & div.studio-brand {
                aspect-ratio: 3/1;
                margin: auto;

                div.studio-logo {
                    width: 100%;
                }
            }

            & div.studio-info {
                margin-top: var(--space-xs);
            }
        }

        & .add-line-item {
            grid-column-start: 2;
            grid-column-end: 4;
            display: inline-flex;
            justify-self: start;
            align-items: center;
            column-gap: var(--space-2xs);
            min-width: 0;

            svg {
                stroke: var(--color--text--primary);
                margin-bottom: var(--space-3xs);
            }
        }

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

            & > input {
                text-align: right;
            }
        }

        & .total {
            border-top: solid var(--size--border) var(--color--border);
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: var(--space-2xl);
            padding-top: var(--space-xs);

            & .label {
                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);
            }

            & .value {
                font-family: 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);
                letter-spacing: var(--font--title--letter-spacing--medium);
                text-transform: var(--font--title--casing--medium);

                text-align: right;
            }
        }

        & span.decoration {
            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);
        }

        & p.businessNote {
            margin-left: auto;
            margin-top: var(--space-s);

            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);
        }

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

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

        & h2:has(+ *) {
            margin-bottom: var(--space-l);
        }

        & ol.items {
            display: grid;
            grid-template-columns: 3rem 1fr;
            list-style: none;
            counter-reset: list;
            margin-bottom: 0;

            & li {
                display: grid;
                grid-template-columns: subgrid;
                counter-increment: list;
                position: relative;
                grid-column: 1 / -1;
                margin-bottom: var(--space-l);


                & div.item-meta {
                    grid-column: 1 / 2;
                    grid-row: span 2;
                    display: flex;
                    flex-direction: column;
                    justify-content: start;
                    align-items: center;

                    &::before {
                        content: counter(list);
                        display: grid;
                        align-items: start;
                        text-align: center;
                        margin-top: 2.5rem;
                        text-align: center;

                        /* TODO: Component variables for line item numbers */
                        font-family: var(--font--title--family--large);
                        font-size: var(--font--title--size--large);
                        font-weight: var(--font--title--weight--large);
                    }

                    & button.remove-item {
                        background: none;
                        color: var(--color--text);
                        width: 2rem;
                        display: grid;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        min-width: 0;
                        padding: var(--space-3xs);

                        & svg {
                            width: 100%;
                            height: auto;
                            stroke: currentColor;

                        }
                    }
                }

                & > * {
                    grid-column-start: 2;
                }

                & .decoration {
                    display: none;
                }

                & div.rate-helper {
                    &:has(select.rateType option[value=flatRate]:checked) {
                        & .hide-flat {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    & div.end-line-items {
        border-bottom: solid var(--size--border) var(--color--border);
        margin-bottom: var(--space-l);
    }
    
    @media (min-width: 600px) {
        div.invoice-form {

            & header {
                display: flex;

                div.studio-info {
                    margin-top: var(--space-xs);
                }
                div.studio-brand {
                    aspect-ratio: 3/1;
                    div.studio-logo {
                        width: 100%;
                    }
                }
            }

            & ol.items li div.rate-helper {
                display: flex;

                & span {
                    align-self: center;
                }

                & div.form-field {
                    flex: 1;
                }

                & .decoration { 
                    display: block;
                }
            }
        }
    }

    @media (min-width: 1000px) {
        div.invoice-form {
            & header {
                display: flex;
                flex-direction: row;
                column-gap: var(--space-xl);
                margin-bottom: var(--space-2xl);

            }

            & div.headerFields {
                display: grid;
                grid-template-columns: repeat(2, 1fr);

                & .invoiceDate {
                    grid-column-start: 1;
                }
            }

            & div.projectInfo {
                display: grid;
                grid-column: 1 / -1;
                grid-template-columns: repeat(2, 1fr);

                & h2, h3 {
                    grid-column: 1 / -1;
                }
            }
        }
    }

    @media (min-width: 1500px) {
        div.invoice-form {
            & ol.items {
                grid-template-columns: 2rem 4fr 5fr 2fr;

                & li {
                    grid-template-rows: auto;

                    &:has(div.description, div.lineDate) {
                        grid-template-rows: auto auto;
                    }

                    &:has(div.description):has(div.lineDate) {
                        grid-template-rows: auto auto auto;
                    }

                    &:has(div.lineDate) {
                        & > div.serviceName, & > div.rate-helper, & > div.linePrice {
                            grid-row: 2;
                        }
                    }

                    & > * {
                        grid-column-start: auto;
                    }

                    & > div.item-meta {
                        grid-row: 1 / -1;
                    }

                    & > div.description {
                        grid-column: 2 / -1;
                    }
                }
            }

            & div.headerFields {
                grid-template-columns: repeat(5, 1fr);
            }

            & div.summary {
                max-width: 21.75rem;
                margin-left: auto;

            }
        }
    }
}