// Sizes
$max-width: {{ .Param "style.pageWidth" | default "750px;" }};
$avatar-size: {{ .Param "style.avatarSize" | default "90px;" }};
$toc-width: {{ .Param "style.tocWidth" | default "350px;" }};

// Colors
$black: {{ .Param "style.colorBlack" | default "#222222" }};
$red: {{ .Param "style.colorRed" | default "#dc3545" }};

// Font
// $font-family: {{ .Param "style.fontFamily" | default "Inconsolata" }};
@font-face {
  font-family: "Inconsolata LGC";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("fonts/inconsolatalgc-scaled-down.woff2") format('woff2');
}
$font-family: "Inconsolata", "Inconsolata LGC";

// Margins
$y-small: 0.6rem;
$y-medium: 1.0rem;

// Placeholders
%link-default {
    color: $red;
    text-decoration: none;
    & * {
        color: $red;
    }
    &:hover {
        color: $red;
        text-decoration: underline;
    }
}
%link-dark {
    color: $black;
    text-decoration: none;
    & * {
        color: $black;
    }
    &:hover {
        color: $black;
        text-decoration: underline;
    }
}
%table-cell {
    border: 1px solid #cccccc;
    padding: 6px 12px;
    text-align: left;
}

// Style
* {
    color: $black;
    font-family: $font-family;
    line-height: 1.2;
}

.text-ru {
  font-family: "Inconsolata LGC", "Inconsolata";
}


$toc-left-width: $toc-width + $max-width + 25px;

.root {
    display: flex;
    flex-direction: column;
}
.table-of-contents {
    order: 0;
    ul {
        padding-left: 1.0rem !important;
        & > li {
            margin-left: 0.3em !important;
        }
    }

    a.active {
        font-weight: bold;
    }

    a:hover {
        cursor: pointer;
    }

    @media(max-width: 578px) {
        align-self: center;
    }
}
.container {
    max-width: $max-width;
    order: 1
}
#title-large-screen {
    display: none;
}
#title-small-screen {
    margin-left: 15px !important;

    @media(max-width: 578px) {
        align-self: center;
    }
}

@media (max-width: $toc-left-width) {
    .root {
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        max-width: $max-width;
    }

    .table-of-contents {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: $toc-width * 1.5 + $max-width) {
    .root {
        margin-left: calc((100vw - 750px) / 2);
    }
    #actual-content {
        margin: 0;
    }
}

@media(min-width: $toc-left-width) {
    .root {
        flex-direction: row;
    }

    .table-of-contents {
        width: $toc-width;
        order: 2;
        position: sticky;
        top: 0px;
        padding: 1em;
        align-self: start;
        scrollbar-width: thin;

        .table-of-contents-text {
            overflow-x: hidden;
            overflow-y: auto;
            max-height: calc(100vh - 155px);
        }

        .hidden {
            display: none;
        }
    }

    #title-small-screen {
        display: none;
    }
    #title-large-screen {
        display: block;
    }
}

.navbar-brand {
    @extend %link-dark;
    font-size: 2rem;
}
.nav-link {
    @extend %link-default;
}
#content {
    a {
        @extend %link-default;
    }
    p {
        margin-bottom: $y-small;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: medium;
        font-weight: bold;
        margin: $y-medium 0 $y-small 0;
    }
    @for $i from 1 through 4 {
        h#{$i} {
            font-size: 1.2rem + 0.2 * (4 - $i);
        }
    }
    img {
        display: block;
        margin: $y-medium auto;
        max-width: 100%;
    }
    a > img {
        margin: $y-medium 4px $y-medium 0px !important;
    }
    .avatar > img {
        border-radius: 50%;
        float: right;
        margin: -8px 0 0 16px;
        height: $avatar-size;
        width: $avatar-size;
    }
    .webbuttons {
        display: flex;
        flex-direction: row;
        gap: 5px;
    }
    .webbuttons > figure {
        margin: 0px;
    }
    ol {
        counter-reset: list;
        list-style: none;
        padding-left: 2rem;
        & > li {
            display: table-row;
        }
        & > li:before {
            content: "[" counter(list, decimal) "] ";
            counter-increment: list;
            display: table-cell;
            text-align: right;
            padding-right: .5em;
        }
    }
    .container > ol, .footnotes > ol {
        padding-left: 0;
    }
    ul {
        list-style: inside;
        padding-left: 2rem;
        & > li {
            list-style-position: outside;
            margin-left: 1em;
        }
    }
    .container > ul, .footnotes > ul {
        padding-left: 0;
    }
    table {
        margin: $y-medium auto;
        width: 100%;
        & th {
            @extend %table-cell;
            font-weight: bold;
        }
        & td {
            @extend %table-cell;
        }
        & tr:nth-child(2n) {
            background-color: #f8f8f8;
        }
    }
    .table-no-header {
      th {
        font-weight: normal;
      }
      table {
        margin: 0rem 0rem 0.5rem 0rem;
      }
    }
    blockquote {
        border-left: 4px solid;
        font-style: italic;
        margin: $y-medium 0;
        padding: 8px 8px;
    }
    code {
        color: $black;
        background-color: #f8f8f8;
        border: 1px solid #cccccc;
        border-radius: 10%;
        padding: 0px 4px;
        font-family: monospace !important;

        span {
            font-family: monospace;
        }
    }
    pre code {
        all: unset;
        font-size: 95%;
    }
    .highlight {
        margin: $y-medium auto;
        border: 1px solid #cccccc;
        & > pre {
            padding: 8px 8px;
            margin-bottom: 0px;
        }
    }
    .abstract {
        margin-top: 12px;
        margin-bottom: 12px;
        padding-left: 72px;
        padding-right: 72px;

        p:first-of-type::before {
            content: "Abstract: ";
            font-weight: bold;
        }
    }
    span.underline {
        text-decoration: underline;
    }
}
#footer {
    a {
        @extend %link-dark;
    }
}