.root {
    --uui-dt-scroll-shadow-bottom-offset: -5px;
    --uui-dt-scroll-shadow-height: 5px;
    --uui-dt-scroll-shadow-background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
    --uui-dt-scroll-shadow-transition: 200ms;

    --uui-dt-sticky-header-top: 0;
    --uui-dt-sticky-header-z-index: 5;

    --uui-dt-no-results-margin-top: 30px;
    //
    background: var(--uui-dt-bg);

    &:global(.-scrolled-left) {
        :global(.uui-scroll-shadow-left) {
            opacity: 1;
        }
    }

    &:global(.-scrolled-right) {
        :global(.uui-scroll-shadow-right) {
            opacity: 1;
        }
    }

    :global(.uui-scroll-shadow-top) {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            height: var(--uui-dt-scroll-shadow-height);
            left: 0;
            right: 0;
            bottom: var(--uui-dt-scroll-shadow-bottom-offset);
            background: var(--uui-dt-top-shadow, var(--uui-dt-scroll-shadow-background));
            opacity: 0;
            transition: opacity var(--uui-dt-scroll-shadow-transition);
            z-index: 0;
        }
    }

    &:global(.-scrolled-top) {
        :global(.uui-scroll-shadow-top)::after {
            opacity: 1;
        }
    }
}

.sticky-header {
    position: sticky;
    top: var(--uui-dt-sticky-header-top);
    isolation: isolate;
    z-index: var(--uui-dt-sticky-header-z-index);
}

.no-results {
    position: sticky;
    left: 0;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
        align-items: center;
    }

    .title {
        padding: 0;
        margin-top: var(--uui-dt-no-results-margin-top);
    }
}
