table-enhance {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: scroll;
}

table-enhance > table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

table-enhance > table > thead > tr {
    border-bottom: solid 1px #ddd;
}

table-enhance > table > thead > tr > * {
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    font-weight: normal;
    padding-bottom: 1.5rem;
}

table-enhance > table > thead > tr > *.right {
    width: 10vw;
    text-align: right;
}

table-enhance > table > thead > tr > *.square {
    width: var(--global--u);
}

table-enhance > table > thead > tr > td {
    opacity: 0.5;
    word-break: normal;
}

table-enhance > table > thead > tr > th[data-sort]:hover {
    color: var(--global--color-green);
}

table-enhance > table > thead > tr > th[data-asc] {
    position: relative;
    font-weight: bold;
    color: var(--global--color-green);
}

table-enhance > table > thead > tr > th[data-asc="asc"]::after {
    position: absolute;
    top: 0;
    right: var(--global--u-smallest);
    content: "arrow_upward";
    font-family: "Material Symbols Rounded";
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
    font-style: normal;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

table-enhance > table > thead > tr > th[data-asc="asc"].right::after {
    left: 0;
}

table-enhance > table > thead > tr > th[data-asc="desc"]::after {
    position: absolute;
    top: 0;
    right: var(--global--u-smallest);
    content: "arrow_downward";
    font-family: "Material Symbols Rounded";
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
    font-style: normal;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

table-enhance > table > thead > tr > th[data-asc="desc"].right::after {
    left: 0;
}

table-enhance > table > tbody > tr {
    height: var(--global--u);
    font-size: 1.25rem;
    border-bottom: solid 1px #eee;
    cursor: pointer;
    transition: transform 0.1s;
}

table-enhance > table > tbody > tr:active {
    transform: translateY(2px);
}

table-enhance > table > tbody > tr > td.right {
    text-align: right;
}

table-enhance > table > tbody > tr > td.square {
    width: var(--global--u);
}

table-enhance > table > tbody > tr > td * {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

table-enhance > table > tbody > tr > td > a {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
}

table-enhance > table > tbody > tr > td i {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: var(--global--color-gray);
    font-size: 1rem;
}

table-enhance > table > tbody > tr > td i:is(.icon, .icon-fill) {
    font-size: 1.5rem;
}

table-enhance > table > tbody > tr > td i[data-delete] {
    background-color: var(--global--color-sw-red);
}

table-enhance > table > tbody > tr > td i[data-select] {
    background-color: var(--global--color-green);
}

table-enhance > table > tbody > tr > td i.black {
    background-color: var(--global--color-black);
}

table-enhance > table > tbody > tr > td i.green {
    background-color: var(--global--color-green);
}

table-enhance > table > tbody > tr > td i.orange {
    background-color: var(--global--color-sw-yellow);
}

table-enhance > table > tbody > tr > td i.red {
    background-color: var(--global--color-sw-red);
}

table-enhance > table > tbody > tr > td i.blue {
    background-color: var(--global--color-blue);
}