.invoices-disclaimer {
    width: 90%;
    font-weight: 700;
    text-align: center;
}

.invoices-table {
    border-collapse: separate;
    width: 90%;

    .collapse-table-mobile-header {
        font-weight: var(--font-bold);

        @media (width >= 80rem), print {
            display: none;
        }
    }

    & > caption > div {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;

        & > svg {
            pointer-events: none;

            position: absolute;
            left: 0.5rem;

            width: 1.5rem;
            height: 1.5rem;
        }

        & > input {
            width: 100%;
            padding: 0.5rem;
            padding-left: 2rem;
            border: 1px solid var(--clr-gray-dark);
            border-radius: 0.75rem;

            &:hover {
                outline: 1px solid transparent;
                outline-offset: 1px;
                box-shadow: 0 0 0 1px var(--clr-gray-dark);
            }
        }
    }

    & > thead {
        display: none;
        font-size: larger;

        & > tr > th {
            padding-top: 1rem;
            padding-bottom: 1rem;

            &.invoices-table-po-no-header {
                text-align: left;
            }

            &.invoices-table-tracking-header,
            &.invoices-table-date-header {
                text-align: center;
            }

            &.invoices-table-total-header,
            &.invoices-table-balance-header {
                text-align: right;
            }
        }

        @media (width >= 80rem), print {
            display: table-header-group;
            text-align: center;
        }
    }

    & > tbody > tr {
        display: flex;
        flex-direction: column;

        margin: 1rem 0;
        padding: 1rem;
        border: 1px solid var(--clr-card-border);
        border-radius: 0.75rem;

        box-shadow: var(--shadow-mid);

        & > td.invoices-table-po-no-row {
            font-size: larger;
            text-align: center;

            & > a {
                font-weight: var(--font-bold);
                text-decoration: underline;

                &:hover {
                    @media (width >= 80rem), print {
                        text-decoration: underline;
                    }
                }

                @media (width >= 80rem), print {
                    text-decoration: none;
                }
            }

            @media (width >= 80rem), print {
                text-align: left;
            }
        }

        & > td.invoices-table-tracking-row {
            border: 1px solid var(--clr-black);
            border-bottom: 0;
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0.75rem;

            background-color: var(--clr-gray-light);

            & > div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
            }
        }

        & > td.invoices-table-date-row {
            padding: 0.5rem 0;
            border-right: 1px solid var(--clr-black);
            border-left: 1px solid var(--clr-black);

            div {
                justify-content: center;
                text-align: center;
            }
        }

        & > td.invoices-table-total-row {
            padding: 0.5rem 0;
            border-right: 1px solid var(--clr-black);
            border-left: 1px solid var(--clr-black);
            background-color: var(--clr-gray-light);

            & > div {
                justify-content: center;
                text-align: center;

                @media (width >= 80rem), print {
                    text-align: right;
                }
            }
        }

        & > td.invoices-table-balance-row {
            padding: 0.5rem 0;
            border: 1px solid var(--clr-black);
            border-top: 0;
            border-right: 1px solid var(--clr-black);
            border-left: 1px solid var(--clr-black);
            border-bottom-right-radius: 0.75rem;
            border-bottom-left-radius: 0.75rem;

            & > div {
                justify-content: center;
                text-align: center;

                @media (width >= 80rem), print {
                    text-align: right;
                }
            }
        }

        & > td.invoices-table-po-no-row,
        & > td.invoices-table-tracking-row,
        & > td.invoices-table-date-row,
        & > td.invoices-table-total-row,
        & > td.invoices-table-balance-row {
            @media (width >= 80rem), print {
                padding: 1rem 0;
                border: unset;
                background-color: unset;
            }
        }

        @media (width >= 80rem), print {
            display: table-row;
            border: unset;
            border-top: 1px solid var(--clr-black);
            box-shadow: none;
        }
    }

    @media (width >= 80rem), print {
        border-collapse: collapse;
    }
}