.datagrid {
    width: 100%;
    color: currentColor;
    border-bottom : 1px solid $color-grey-light-6;

    &-wrapper {
        overflow-x: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    // thead th
    &__heading {
        padding: 15px;
        font-weight: normal;
        background-color: $color-blue-dark;
        color: $color-white;
        font-size: 0.875rem;
        vertical-align: top;

        &:not(:first-child) {
            border-left : 1px solid $color-grey-light-5;
        }
    }

    &__sort-column {
        color: $color-white;
        padding-left: 20px;
        position: relative;

        &::before {
            content: "\2191\2193";
            color: $color-grey-light-7;
            margin-left: -20px;
            position: absolute;
        }

        &.ascending::before {
            content: "\2191";
            color: $color-white;
        }

        &.descending::before {
            content: "\2193";
            color: $color-white;
        }
    }

    // tr
    &__row {

        &:nth-child(odd) {
            background-color: $color-white;
        }

        &:nth-child(even) {
            background-color: $color-grey-light-1;
        }

        &.hovered {
            background-color: $color-hover;
        }
    }


    // td
    &__cell {
        padding: 10px;
        border-top: 1px solid $color-grey-light-1;
        font-size: 0.875rem;
        position: relative;
        vertical-align: top;

        &:not(:first-child) {
            border-left : 1px solid $color-grey-light-5;
        }
    }
}

