/**
 * Make sure the article that contains the cr-table-view has some styling to set it apart from the background
 */

.Article__content:has(.cr-table-view) {
    padding: clamp(1.2rem, 6vw, var(--marginLarge));
    box-shadow: var(--boxShadow), 0 0 0 1px var(--baseLight200);
    border-radius: var(--borderRadiusSmall);
    background-color: var(--baseLight100);
}

/**
 * General cr-table-view styling
 */

.cr-table-view {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--borderRadiusSmall);
    background-color: var(--baseLight100);
    color: var(--baseDark300);

    & > caption {
        display: none;
    }

    & th,
    & td {
        padding: var(--marginSmall);
        white-space: nowrap;
        text-align: left;
    }

    & [class*='clickable']:hover {
        cursor: pointer;
    }

    & [class*='sorted'],
    & [class*='sorted'] a {
        font-weight: 600;
        color: var(--baseDark900);
    }

    /**
     * thead
     */

    & thead th {
        border-bottom: 1px solid var(--baseLight300);
    }

    & thead th a,
    & thead th span {
        display: inline-flex;
        align-items: center;
        gap: var(--marginExtraSmall);
        font-size: var(--labelSize);
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--baseDark200);
    }

    & thead th a:hover {
        color: var(--baseDark900);
    }

    & thead svg {
        max-width: var(--labelSize);
        max-height: var(--labelSize);
    }

    /**
     * tbody
     */

    & > tbody td {
        border-bottom: 1px solid var(--baseLight300);
    }

    & > tbody [class*='clickable']:hover td {
        background-color: #dadada30;
    }

    & > tbody .icon {
        max-width: var(--rootSize);
    }

    & > tbody .cr-no-results > h2 {
        margin-bottom: 0;
        font-size: var(--rootSize);
    }

    /**
     * tfoot
     */

    & tfoot {
        display: none;
    }
}