@use './core' as *;

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;

    font-family: var(--text-font-family);
    font-size: var(--text-fs-base);
    line-height: var(--text-lh-base);
    font-weight: var(--text-regular);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    scroll-padding-top: var(--layout-scroll-offset);
    color-scheme: var(--color-scheme);

    @media (min-width: $breakpoint-docs-nav-medium) {
        --header-nav-height: 64px;
    }

    // Fixes Radix <Select /> visual jump on click
    // (Breaks position sticky header)
    body[data-scroll-locked] {
        overflow: visible !important;
    }
}

// Safari only fix light/darkmode scrollbar colors
// `_::-webkit-full-page-media, _:future, :root` Safari only CSS hack
_::-webkit-full-page-media,
_:future,
:root *::-webkit-scrollbar {
    width: 15px;
}

_::-webkit-full-page-media,
_:future,
:root *::-webkit-scrollbar-track {
    background-color: #fafafa;
    border-right: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
}

_::-webkit-full-page-media,
_:future,
:root[data-dark-mode='true'] *::-webkit-scrollbar-track {
    background-color: #2c2c2c;
    border-right-color: #3d3d3d;
    border-left-color: #3d3d3d;
}

_::-webkit-full-page-media,
_:future,
:root *::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #c1c1c1;
    border: 4px solid transparent;
    background-clip: content-box;
}

_::-webkit-full-page-media,
_:future,
:root[data-dark-mode='true'] *::-webkit-scrollbar-thumb {
    background-color: #6b6b6b;
}
