.color-box {
    width: 2ch;
    height: 2ch;
    border-radius: 0.5rem;
    margin-right: 0.2rem;
    display: inline-block;
    vertical-align: text-bottom;
}

.color-box-full {
    min-width: 3ch;
    width: 100%;
    height: 100%;
    display: block;
}

.separator {
    color: var(--bs-gray-500);
}

table.filament-table td,
table.print-table td {
    height: 5rem;
}

.page-actions {
    display: flex;
    justify-content: space-between;
}

#material-cost-table {
    & tfoot tr:first-child {
        & th,
        & td {
            vertical-align: top;
            border-top: 2px solid var(--bs-black);
        }
    }
}
.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.details-row {
    & img {
        max-width: 120px;
    }
    
    & .name {
        max-width: 70%;
        overflow-wrap: anywhere;
    }
    
    & .details li {
        white-space: nowrap;
    }
    
    & table {
        margin-bottom: 0;
        
        & tr:last-child td {
            border-bottom: none;
        }
    }
}

.project-row:not(.open) {
    [data-show="open"] {
        display: none;
    }
    
    [data-show="close"] {
        display: inline-block;
    }
    
    & ~ .project-print-row > td {
        display: none;
    }
}

.project-row.open {
    [data-show="open"] {
        display: inline-block;
    }

    [data-show="close"] {
        display: none;
    }
}

.project-print-row {
    & td:first-child {
        padding-left: 3rem;
    }
}

/* SORTABLE TABLE */

table.sortable th {
}

table.sortable th button {
    font-weight: bold;
    background: transparent;
    border: 2px solid transparent;
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    outline: none;
    cursor: pointer;
    text-align: left;
}

table.sortable th button span {
    margin-right: 0.25rem;
}

table.sortable th[aria-sort="descending"] span::after {
    content: "▼";
    color: currentcolor;
    font-size: 100%;
    top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
    content: "▲";
    color: currentcolor;
    font-size: 100%;
    top: 0;
}

table.sortable th button:focus,
table.sortable th button:hover {
    border: 2px solid currentcolor;
    background-color: #e5f4ff;
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
    content: "▼";
    color: currentcolor;
    font-size: 100%;
}

/* END SORTABLE TABLE */