/* ------------------------------------------------- */
/* ----- Basic Setup ----- */
/* ------------------------------------------------- */

$rem-scale: 0.585;

@function rem($rem) {
    @return $rem-scale * $rem * 1rem;
}

:root {
    --nav-height: #{rem(6.5)}; // Changes to height requires changes to partials/toc.html since custom scroll logic implementation

    --h1: #{rem(4.2)};
    --h2: #{rem(2.6)};
    --h3: #{rem(2.2)};
    --h4: #{rem(1.8)};
    --h5: #{rem(1.6)};
    --base: #{rem(1.6)};
    --sm: #{rem(1.4)};
    --xsm: #{rem(1.2)};

    @media(max-width: 850px) {
        --h1: #{rem(3.4)};
        --h2: #{rem(2.6)};
        --h3: #{rem(2.2)};
        --h4: #{rem(1.8)};
        --h5: #{rem(1.6)};
    }

    --pico: #{rem(0.5)};
    --nano: #{rem(1)};
    --micro: #{rem(1.5)};
    --milli: #{rem(2)};
    --xx-small: #{rem(2.5)};
    --x-small: #{rem(3)};
    --small: #{rem(4)};
    --medium: #{rem(5)};
    --large: #{rem(6)};

    --orchid: #e537c0;
    --orange: #ee8660;
    --lavender: #ad37e5;
    --brand: #7f4eff;
    --purple-dark: #472f85;

    --white: #fff;
    --white-light: #fefefe;
    --code-block-light: #f9f7fd;

    --nav-light: #fff;
    --nav-dark: #111111d9;

    --black: #111111;
    --black-mid: #141414;
    --black-light: #181818;
    --black-lighter: #222222;
    --black-lightest: #343434;

    --gray-dark: #555555;
    --gray-mid: #888888;
    --gray: #bbb;
    --gray-light: #dddddd;
    --gray-lighter: #dddd;
    --gray-lightest: #eeeeee;

    --shadow-default: 0 #{rem(0.625)} #{rem(1.5)} #{rem(0)} rgba(0, 0, 0, 0.08);
}

body.dark {
    --bg: var(--black-mid);
    --bg-nav: var(--nav-dark);
    --bg-sub: var(--black-light);
    --card: var(--black-mid);
    --card-light: var(--black-light);
    --color-scheme: dark;
    --divider: var(--black-lighter);
    --divider-light: var(--black-lightest);

    --link: var(--brand);

    --code-block: var(--card-light);
    --code-simple: #c2c2c2;
    --code-simple-bg: #292929;
    --code-red: #fc6e6c;
    --code-pink: #f97fe6;
    --code-blue: #4b73f8;
    --code-green: #2e731c;

    --important: var(--gray-lightest);
    --sub: var(--gray-light);
    --body: var(--gray);
    --highlight: #e0a5fb;

    --shadow-default: 0 #{rem(0.625)} #{rem(1.5)} 0 rgba(0, 0, 0, 0.4);
    --note: #fffad411;
    --note-border: #b9a61545;
    --note-after: #fbe2d9;
    --note-gutter: #ffe600;

    --tip: #3f3b4291;
    --tip-border: #983fb1;
    --tip-after: #761c91;
    --tip-gutter: #b115b9;

    --annotation: #e9f7fb;
    --annotation-border: #c0d3d8;
    --annotation-bg: #242424;
    --annotation-after: #c0d3d8;

    // NOTE(benesch): please ensure these colors stay blueish. Public preview
    // requires a mild amount of caution. Importantly, green is not the right
    // color, as that implies encouragement rather than caution.
    --public-preview: #393e514b;
    --public-preview-text: var(--important);
    --public-preview-border: #374e7c;
    --public-preview-after: #c0d3d8;
    --public-preview-gutter: #306dca;
}

body.light {
    --bg: var(--white-light);
    --bg-nav: var(--nav-light);
    --bg-sub: var(--gray-lighter);
    --card: var(--gray-lightest);
    --card-light: var(--white);
    --color-scheme: light;
    --divider: var(--gray);
    --divider-light: var(--gray-lighter);

    --link: var(--brand);

    --code-block: var(--code-block-light);
    --code-simple: #505050;
    --code-simple-bg: var(--code-block-light);
    --code-red: #c41a16;
    --code-pink: #a90d91;
    --code-blue: #1c01ce;
    --code-green: #177500;

    --important: var(--black);
    --sub: var(--black-lighter);
    --body: var(--black-light);
    --highlight: var(--purple-dark);

    --note: #fffad411;
    --note-border: #b9a61545;
    --note-after: #fbe2d9;
    --note-gutter: #7b7b29;

    --tip: #f4e3fd91;
    --tip-border: #983fb1;
    --tip-after: #761c91;
    --tip-gutter: #b115b9;

    --annotation-border: #c0d3d8;
    --annotation-after: #c0d3d8;
    --annotation-bg: #e7ebf1;

    // NOTE(benesch): please ensure these colors stay blueish. Public preview
    // requires a mild amount of caution. Importantly, green is not the right
    // color, as that implies encouragement rather than caution.
    --public-preview: #e9f7fb;
    --public-preview-border: #c0d3d8;
    --public-preview-after: #c0d3d8;
    --public-preview-gutter: #186477;
    --public-preview-text: var(--black);
}

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

body {
    font-family: "Inter", sans-serif;
    color: var(--important);
    color-scheme: var(--color-scheme);
    background: var(--bg);
    font-size: var(--base);
    line-height: 1.7;
    font-weight: 300;
    max-width: 100vw;
    overflow-x: hidden;

    @media(max-width: 500px) {
        font-size: rem(1.5);
    }
}

input,
textarea,
select {
    font-family: inherit;
}

a,
button,
input[type="submit"] {
    cursor: pointer;
    background: none;
    border: none;
    transition: all 0.2s;
    transition-delay: 50ms;
    font-family: inherit;
}

.osano-cm-widget { display: none; }

/**
    The following section handles these cases:
    1. Buttons with links
    2. Links
    3. Links with <code/>
    4. Link in the index (<nav/>) with <code/>
    5. Links inside notes
    6. Links inside notes with <code/>
**/
.btn,
.btn-ghost {
    color: var(--white);
    text-decoration: none;

    &:hover,
    &:focus {
        text-decoration: underline;
        color: var(--white);
    }
}

nav {
    .link-with-code {
        color: var(--sub);

        &:hover,
        &:focus {
            text-decoration: underline;
            color: var(--link);
        }
    }
}

p > a,
.note > a,
.tip > a,
.annotation > a,
.link-with-code {
    color: var(--link);

    &:hover,
    &:focus {
        text-decoration: underline;
        color: var(--sub);
    }
}

.annotation-title {
    font-weight: 600;
    padding-bottom: rem(1.2);
}

a {
    &:hover,
    &:focus {
        text-decoration: underline;
        color: var(--link);
    }

    color: var(--sub);
    text-decoration: none;
}

/*-------- Finish links color--------*/

[class*="btn"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: var(--brand);
    color: var(--white);
    padding: rem(0.6) rem(1.2);
    border-radius: 8px;

    svg {
        margin-right: rem(.6);
        width: 18px;
        height: 18px;
    }

    &:hover,
    &:focus {
        color: var(--white);
        text-decoration: none;
        box-shadow: rgba(128,78,255,.3) 0px 0px 0px 8px
    }
}

.btn-ghost {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--brand);
    color: var(--important);

    &:hover,
    &:focus {
        color: var(--important);
    }
}

.graident-text {
    background: var(--brand);
    color: transparent;
    background-clip: text;
}

select.version-dropdown {
    appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-image: url('https://res.cloudinary.com/mzimgcdn/image/upload/v1737129759/dropdown.svg');
	background-position: right 0.5rem top 50%, 0 0;
	background-repeat: no-repeat, repeat;
	background-size: 1.3rem auto, 100%;
	outline: 1px solid transparent;
    border: 1px solid var(--divider);
    padding: var(--pico) var(--nano);
    border-radius: 4px;
    background-color: var(--bg);

	&:focus,
	&:active {
		outline: none;
	}
}


red { color: var(--code-red); }
blue { color: #2300ce; }