.aw-table {
    @apply shadow-none bg-surface;
    border-radius: 15px;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));

    &--without-top-radius {
        @apply rounded-t-none;

        .aw-table__scroller {
            @apply rounded-t-none;
        }

        .aw-table-builder__empty-filter-container, .aw-table-builder__empty-container {
            @apply rounded-t-none;
        }
    }

    &--desktop {
        margin-left: 0;
        margin-right: 0;

        td {
            @apply py-6;
        }
    }

    tr + tr {
        border-color: var(--c-mono-900);
    }

    tbody > tr:first-child {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    tbody > tr:last-child {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    tbody > tr {
        @apply border-b-8 border-page-bg;
    }

    tbody tr:last-child {
        border-bottom: none;
    }

    &__head > tr {
        @apply bg-surface;
        border-bottom: 0;
    }

    &__scroller {
        width: 100%;
        overflow: auto;
        scrollbar-width: none;
        border-radius: 15px;

        background:
            /* Shadow covers */ linear-gradient(
                90deg,
                var(--c-surface) 30%,
                rgba(var(--c-surface-rgb), 0)
            ),
            linear-gradient(
                    90deg,
                    rgba(var(--c-surface-rgb), 0),
                    var(--c-surface) 70%
                )
                100% 0,
            /* Shadows */
                linear-gradient(
                    90deg,
                    rgba(var(--c-overlay-rgb), 0.1) 30%,
                    rgba(var(--c-overlay-rgb), 0)
                ),
            linear-gradient(
                    90deg,
                    rgba(var(--c-overlay-rgb), 0),
                    rgba(var(--c-overlay-rgb), 0.1) 70%
                )
                100% 0;

        /* radial-gradient(farthest-side at 0 50%, rgba(var(--c-overlay-rgb),.3), rgba(var(--c-overlay-rgb),0)),
            radial-gradient(farthest-side at 100% 50%, rgba(var(--c-overlay-rgb),.3), rgba(var(--c-overlay-rgb),0)) 100% 0; */
        background-repeat: no-repeat;
        background-color: var(--c-surface);
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;

        /* Opera doesn't support this in the shorthand */
        background-attachment: local, local, scroll, scroll;

        &::-webkit-scrollbar-thumb {
            display: none;
            background-color: transparent;
        }

        tr:not(:hover) {
            background: transparent !important;
        }
    }

    &__head-cell {
        opacity: 0.5;
        transition: opacity 0.25s ease;

        &--orderable {
            cursor: pointer;

            &:hover {
                background-color: unset;
                opacity: 1;
                color: var(--c-success);
            }
        }
    }

    &__col {
        display: inline-flex;

        &--orderable {
            position: relative;
            padding-right: theme('spacing.4', 1rem);

            &:after,
            &:before {
                content: '';

                border-left: 4px solid transparent;
                border-right: 4px solid transparent;

                width: 0;
                height: 0;

                position: absolute;
                right: 0;
            }

            &:after {
                top: 50%;
                border-bottom: 4px solid var(--c-mono-400);
                transform: translateY(calc(-50% - 3px));
            }

            &:before {
                top: 50%;
                border-top: 4px solid var(--c-mono-400);
                transform: translateY(2px);
            }
        }

        &--asc:after {
            border-bottom-color: var(--c-on-surface);
        }

        &--desc:before {
            border-top-color: var(--c-on-surface);
        }
    }

    &__row {
        &--hoverable {
            cursor: pointer;

            &:hover {
                background-color: rgba(var(--c-mono-900-rgb), 0.5);
                color: var(--c-on-surface);
            }
        }

        &--mobile {
            display: block;
            padding: 1.5rem;

            &:hover {
                background: inherit;
                color: inherit;
            }
        }
    }

    &__cell {
        &--mobile {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;

            &:nth-of-type(2n + 1) {
                background: none;
            }
        }
    }

    &__cell-arrow {
        float: right;
    }

    &__mobile-header {
        @apply border-b-1 border-mono-900;
        display: flex;
        align-items: center;
        padding: 0 0 1rem 0;
        margin-bottom: theme('spacing.4', 1rem);

        &:last-child {
            margin-bottom: 0;
            border: 0;
            padding-bottom: 0;
        }

        & + svg {
            flex-shrink: 0;
        }
    }

    &__mobile-header-content {
        flex-grow: 1;
    }

    &__mobile-header-arrow {
        color: var(--c-mono-400);
    }

    &__aw-context-menu {
        display: flex;
        justify-content: flex-end;
    }
}

[data-dark='false'] {
    .aw-table {
        &__head-date {
            @apply text-mono-300;
        }
    }
}

[data-dark='true'] {
    .aw-table {
        &__head-date {
            @apply opacity-70;
        }
    }
}

@screen md {
    .aw-table {
        tbody > tr {
            @apply border-b-0;
        }

        tbody {
            > tr + .aw-table__row {
                border-color: var(--c-mono-800);
            }
        }
    }
}