// SCSS Module for manual.scss and style.scss

// set this to true for integration into the ocaml.org website
$ocamlorg:false;
/* ocaml logo color */
$logocolor:#ec6a0d;
$logo_height:67px;

@if $ocamlorg {
    .container {
	margin-left:0;
	margin-right:0;
    }
}


/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400,500);
@import url(https://fonts.googleapis.com/css?family=Noticia+Text:400,400i,700);
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,500i,600,600i,700,700i);

$font-sans: "Fira Sans", sans-serif;
$font-mono: "Fira Mono", monospace;
$font-serif: "Noticia Text", serif;

/* Reset */
.pre,a,b,body,code,div,em,form,h1,h2,h3,h4,h5,h6,header,html,i,img,li,mark,menu,nav,object,output,p,pre,s,section,span,time,ul,td,var{
    margin:0;
    padding:0;
    border:0;
    font-size:inherit;
    font:inherit;
    line-height:inherit;
    vertical-align:baseline;
    text-align:inherit;
    color:inherit;
    background:0 0
}
*,:after,:before{
    box-sizing:border-box
}

html.smooth-scroll {
    scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
	    scroll-behavior:auto;
	}
}

body{
    font-family: $font-sans;
    text-align:left;
    color:#333;
    background:#fff
}

html {
    font-size: 16px;
    .dt-thefootnotes{
	height:1ex;
    }
    .footnotetext{
	font-size: 13px;
    }
}

#sidebar-button{
	float:right;
	cursor: context-menu;
	span{
	    font-size:28px;
	}
	display:none;
    }

.content, .api {
    &>header {
	margin-bottom: 30px;
	nav {
	    font-family: $font-sans;
	}
    }
}

@mixin content-frame {
    max-width:90ex;
    margin-left:calc(10vw + 20ex);
    margin-right:4ex;
    margin-top:20px;
    margin-bottom:50px;
    font-family: $font-serif;
    line-height:1.5
}

/* Menu in the left bar */
@mixin nav-toc {
    display: block;
    padding-top: 10px;
    position:fixed;
    @if $ocamlorg {
	top:0;
    } @else {
	top:$logo_height;
    }
    bottom:0;
    left:0;
    max-width:30ex;
    min-width:26ex;
    width:20%;
    background-color: #ede8e6;
    overflow:auto;
    color:#1F2D3D;
    padding-left:2ex;
    padding-right:2ex;
    .toc_version {
	font-size:smaller;
	text-align:right;
	a {
	    color:#888;
	}
    }
    ul{
	list-style-type:none;
	li{
	    margin:0;
	    ul{
		margin:0
	    }
	    li{
		border-left:1px solid #ccc;
		margin-left:5px;
		padding-left:12px;
	    }
	    a {
		font-family: $font-sans;
		font-size:.95em;
		color:#333;
		font-weight:400;
		line-height:1.6em;
		display:block;
		&:hover {
		    box-shadow:none;
		    background-color: white;
		    text-decoration: underline;}
	    }
	    &.top a {
		color: #848484;
		&:hover {
		    background-color: unset;
		    text-decoration: underline;
		}
	    }
	}
    }
    &>ul>li {
	margin-bottom:.3em;
	&>a {  /* First level titles */
	    font-weight:500;}
    }
}

/* OCaml Logo */
@mixin brand {
    @if $ocamlorg {
	display:none;
    }
    top:0;
    height:$logo_height;
    img{
	margin-top:14px;
	height:36px
    }
}

@mixin mobile {
    .api, .content{
	margin:auto;
	padding:2em;
	h1 {
	    margin-top:0;
	}
    }
}

@mixin nav-toc-mobile {
    position:static;
    width:auto;
    min-width:unset;
    border:none;
    padding:.2em 1em;
    border-radius:5px 0;
    &.brand {border-radius: 0 5px;}
}

/* Header is used as a side-bar */
@mixin header-mobile {
    margin-bottom:0;
    position:fixed;
    left:-10000px; /* initially hidden */
    background-color:#ffefe7;
    transition:left 0.4s;
    top:0;
    max-width:calc(100% - 2em);
    max-height: 100%;
    overflow-y: auto;
    box-shadow:0.4rem 0rem 0.8rem #bbb;
}

@mixin sidebar-button {
    #sidebar-button{
	display:inline-block;
	position:fixed;
	top:1.5em;
	right:1ex;
    }
}

/* Print adjustments. */
/* This page can be nicely printed or saved to PDF (local version) */

@media print {
    body {
	color: black;
	background: white;
    }
    body nav:first-child {
	position: absolute;
	background: transparent;
    }
    .content, .api {
	nav.toc {
	    margin-right: 1em;
	    float: left;
	    position: initial;
	    background: #eee;
	}
	margin-left: 3em;
	margin-right: 3em;
    }
}

@mixin caret {
    content:"▶";
    color:$logocolor;
    font-size:smaller;
    margin-right:4px;
    margin-left:-1em
}

@mixin colored-disc-marker {
    list-style-type: disc;
    li::marker { color:$logocolor; }
}

@mixin diamond {
    content:"◆";
    color:$logocolor;
    margin-right:4px;
    margin-left:-1em;
    font-family: $font-sans;
    font-size:14px;
    vertical-align:1px;
}