/* (c) Copyright Frontify Ltd., all rights reserved. */

@import '../../../utilities/transitions.module.scss';

.root {
    height: 100%;
    width: 100%;
    overflow: hidden;
    --scrollbar-size: 10px;
}

.viewport {
    width: 100%;
    height: 100%;
    padding-right: var(--scrollbar-size);

    &[data-show-shadow="true"] {
        box-shadow: inset 0 -15px 8px -10px var(--box-neutral-color);
    }
}

.scrollbar {
    @include transition-colors;
    display: flex;

    user-select: none;
    /* disable browser handling of all panning and zooming gestures on touch devices */
    touch-action: none;

    padding: 2px;
    box-sizing: border-box;

    background: var(--box-neutral-color);

    &:hover {
        background: var(--box-neutral-color-hover);
    }

    &[data-orientation='vertical'] {
        width: var(--scrollbar-size);
    }

    &[data-orientation='horizontal'] {
        flex-direction: column;
        height: var(--scrollbar-size);
    }
}

.thumb {
    flex: 1;
    background: var(--box-neutral-strong-color);
    border-radius: var(--scrollbar-size);
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
    }
}

.corner {
    background: var(--box-neutral-color-hover);
}
