"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollArea = exports.scrollAreaStyle = void 0;
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const scrollbarColor = (0, varsUtilities_1.color)('border', 'default', 'strong');
const transparentAreaColor = (0, varsUtilities_1.color)('background', 'default', 'surface');
exports.scrollAreaStyle = {
    scrollbarGutter: 'stable',
    overflowY: 'overlay',
    overflowX: 'overlay',
    // firefox
    scrollbarColor: `${scrollbarColor} transparent`,
    scrollbarWidth: 'thin',
    '&::-webkit-scrollbar': {
        visibility: 'hidden',
    },
    // the rest
    '&::-webkit-scrollbar:vertical': {
        width: '8px',
    },
    '&::-webkit-scrollbar:horizontal': {
        height: '8px',
    },
    '@media (hover: hover)': {
        '&:hover': {
            // the rest
            '&::-webkit-scrollbar': {
                visibility: 'visible',
            },
            '&::-webkit-scrollbar-thumb': {
                backgroundColor: scrollbarColor,
                borderRadius: '4px',
            },
            '&::-webkit-scrollbar-thumb:vertical': {
                borderRight: `2px solid ${transparentAreaColor}`,
                minHeight: '32px',
            },
            '&::-webkit-scrollbar-thumb:horizontal': {
                borderBottom: `2px solid ${transparentAreaColor}`,
                minWidth: '32px',
            },
        },
    },
};
exports.ScrollArea = (0, inlines_1.styled)('div', exports.scrollAreaStyle);
//# sourceMappingURL=index.js.map