.scrollOverflowHint {
    --scroll-overflow-hint-size: var(--navbar);
}

.scrollOverflowHint[data-scroll-hint-axis="x"].has-overflow-before.has-overflow-after {
    mask-image: linear-gradient(to right, transparent, #000 var(--scroll-overflow-hint-size), #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--scroll-overflow-hint-size), #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
}

.scrollOverflowHint[data-scroll-hint-axis="x"].has-overflow-before:not(.has-overflow-after) {
    mask-image: linear-gradient(to right, transparent, #000 var(--scroll-overflow-hint-size));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--scroll-overflow-hint-size));
}

.scrollOverflowHint[data-scroll-hint-axis="x"].has-overflow-after:not(.has-overflow-before) {
    mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
}

.scrollOverflowHint[data-scroll-hint-axis="y"].has-overflow-before.has-overflow-after {
    mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-overflow-hint-size), #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-overflow-hint-size), #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
}

.scrollOverflowHint[data-scroll-hint-axis="y"].has-overflow-before:not(.has-overflow-after) {
    mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-overflow-hint-size));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-overflow-hint-size));
}

.scrollOverflowHint[data-scroll-hint-axis="y"].has-overflow-after:not(.has-overflow-before) {
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
}
