/*
    These functions load a generic editable grid at the moment:
    - FormSubmissions widget

    Look for table.formSubmissionTable in /Templates/Default/Css/Modules/FormSubmissions.css
    Look for default base table styles in /Templates/Default/Css/General/Tables.css

    Custom functions might produce editable grids. These will generally have their own classnames. In these cases you
    can style individual columns using a form of the field name, e.g. th.editablegrid-Field_Name and td.editablegrid-FieldName.
    In those cases CustomElements.css is probably the place to put your CSS.
*/

table th[class*=editablegrid-] {
}

    table th[class*=editablegrid-] a {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        table th[class*=editablegrid-] a[class*=sort]::after {
            content: "";
            display: block;
            vertical-align: middle;
            margin-left: 15px;
            height: 0;
            width: 0;
            border-color: var(--site-table-head-th-text-color) transparent;
            border-style: solid;
            border-width: 0 0.45rem 0.55rem 0.45rem;
        }

        table th[class*=editablegrid-] a.sort-ascending::after {
            border-width: 0 0.45rem 0.55rem 0.45rem;
        }

        table th[class*=editablegrid-] a.sort-descending::after {
            border-width: 0.55rem 0.45rem 0 0.45rem;
        }

        table th[class*=editablegrid-] a[class*=sort]:hover::after {
            border-color: var(--site-link-hover-color) transparent;
        }

        table th[class*=editablegrid-] a .editablegrid-icon {
            display: none;
        }

table td[class*=editablegrid-] {
}

    table td[class*=editablegrid-]:empty::after {
        content: "-";
    }