/*
 * CSS file for the second edition of os.phil-opp.com.
 *
 * Based on `poole`which was designed, built, and released under MIT license by @mdo. See
 * https://github.com/poole/poole.
 */

/*
 * Contents
 *
 * Fonts
 * Body resets
 * Dark/Light Mode
 * Custom type
 * Messages
 * Container
 * Masthead
 * Posts and pages
 * Pagination
 * Reverse layout
 * Themes
 */

/* Fonts */

@font-face {
    font-family: "Iosevka";
    src: url("/fonts/iosevka-regular.woff2") format("woff2"), url("/fonts/iosevka-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
   * Body resets
   *
   * Update the foundational and global aspects of the page.
   */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

/* Dark/Light Mode */

@mixin set-colors-light {
    --background-color: #fff;
    --text-color: #515151;
    --heading-color: #313131;
    --heading-code-color: #a0565c;
    --link-color: #268bd2;
    --hr-color-top: #eee;
    --hr-color-bottom: #fff;
    --code-text-color: #bf616a;
    --code-background-color: #f9f9f9;
    --masthead-title-color: #505050;
    --strong-color: #303030;
    --masthead-subtitle: #c0c0c0;
    --post-title-color: #228;
    --gh-repo-box-border-color: #ddd;
    --background-color-section-bare-bones: #f6f6ff;
    --border-color-section-bare-bones: #ccccff;
    --background-color-section-basic-io: #f6fff6;
    --border-color-section-basic-io: #99ff99;

    // colors with transparency that work for both light and dark mode
    --background-color-note: #00ff001a;
    --border-color-note: #00ff0050;
}

@mixin set-colors-dark {
    --background-color: #252525;
    --text-color: #f5f5f5;
    --heading-color: #eee;
    --heading-code-color: #eee;
    --link-color: #c59ff3;
    --hr-color-top: #333;
    --hr-color-bottom: #000;
    --code-text-color: #eeeeee;
    --code-background-color: #222222;
    --masthead-title-color: #b6b6b6;
    --strong-color: #c0c0c0;
    --masthead-subtitle: #8f8f8f;
    --post-title-color: #c8c8ff;
    --gh-repo-box-border-color: #555;
    --background-color-section-bare-bones: #114;
    --border-color-section-bare-bones: #66a;
    --background-color-section-basic-io: #131;
    --border-color-section-basic-io: #6a6;
}

@mixin light-switch-light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004' class='bi bi-moon' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.53 10.53a7 7 0 0 1-9.058-9.058A7.003 7.003 0 0 0 8 15a7.002 7.002 0 0 0 6.53-4.47z'/%3E%3C/svg%3E");
}

@mixin light-switch-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9' class='bi bi-brightness-high-fill' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E");
}

body {
    @include set-colors-light();
}

[data-theme="dark"] body {
    @include set-colors-dark();
}

/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    body {
        @include set-colors-dark();
    }
    /* Override dark mode with light mode styles if the user decides to swap */
    [data-theme="light"] body {
        @include set-colors-light();
    }
}

body {
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* No `:visited` state is required by default (browsers will use `a`) */

a {
    color: var(--link-color);
    text-decoration: none;
}

/* `:focus` is linked to `:hover` for basic accessibility */

a:hover,
a:focus {
    text-decoration: underline;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5rem;
    font-weight: bold;
    line-height: 1.25;
    color: var(--heading-color);
    text-rendering: optimizeLegibility;
}
h1 {
    font-size: 2rem;
}
h2 {
    margin-top: 1rem;
    font-size: 1.5rem;
}
h3 {
    margin-top: 1.5rem;
    font-size: 1.25rem;
}
h4,
h5,
h6 {
    margin-top: 1rem;
    font-size: 1rem;
}

/* Body text */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

strong {
    color: var(--strong-color);
}

/* Lists */
ul,
ol,
dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Nested lists */
li ul,
li ol,
li dl {
    margin-bottom: 0;
}

li ul + p,
li ol + p,
li dl + p {
    margin-top: 1rem;
}

dt {
    font-weight: bold;
}
dd {
    margin-bottom: 0.5rem;
}

/* Misc */
hr {
    position: relative;
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--hr-color-top);
    border-bottom: 1px solid var(--hr-color-bottom);
}

abbr {
    font-size: 90%;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
}
abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #e5e5e5;
}

/* Code */
code,
pre {
    font-family: "Iosevka", monospace;
}
code {
    padding: 0.25em 0.5em;
    font-size: 85%;
    color: var(--code-text-color);
    background-color: var(--code-background-color);
    border-radius: 3px;
}
pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: pre;
    overflow: auto;
    word-wrap: normal;
    background-color: var(--code-background-color);
}
pre code {
    padding: 0;
    font-size: 100%;
    color: inherit;
    background-color: transparent;
}
pre mark {
    // make highlights take the full width
    display: block;
    // use the code color (instead of black)
    color: inherit;
    // override the background color (instead of black)
    background-color: rgba(0, 255, 0, 0.1) !important;
}

.highlight {
    margin-bottom: 1rem;
    border-radius: 4px;
}
.highlight pre {
    margin-bottom: 0;
}

/* Quotes */
blockquote {
    padding: 0.5rem 1rem;
    margin: 0.8rem 0;
    color: #7a7a7a;
    border-left: 0.25rem solid #e5e5e5;
}
blockquote p:last-child {
    margin-bottom: 0;
}
@media (min-width: 30rem) {
    blockquote {
        padding-right: 5rem;
        padding-left: 1.25rem;
    }
}

img {
    display: block;
    margin: 0 0 1rem;
    border-radius: 5px;
    max-width: 100%;
    color: grey;
    font-style: italic;
}

/* Tables */
table {
    margin-bottom: 1rem;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-collapse: collapse;
}
td,
th {
    padding: 0.25rem 0.5rem;
    border: 1px solid #e5e5e5;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
    background-color: var(--code-background-color);
}

/*
   * Custom type
   *
   * Extend paragraphs with `.lead` for larger introductory text.
   */

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

/*
   * Messages
   *
   * Show alert messages to users. You may add it to single elements like a `<p>`,
   * or to a parent if there are multiple elements to show.
   */

.message {
    margin-bottom: 1rem;
    padding: 1rem;
    color: #717171;
    background-color: var(--code-background-color);
}

/*
   * Container
   *
   * Center the page content.
   */

.container {
    max-width: 45rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

/*
   * Masthead
   *
   * Super small header above the content for site name and short description.
   */

.masthead {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.masthead-title {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--masthead-title-color);
}
.masthead-title a {
    color: var(--masthead-title-color);
}
.masthead small {
    font-size: 75%;
    font-weight: 400;
    color: var(--masthead-subtitle);
    letter-spacing: 0;
}

/*
   * Posts and pages
   *
   * Each post is wrapped in `.post` and is used on default and post layouts. Each
   * page is wrapped in `.page` and is only used on the page layout.
   */

.page {
    margin-bottom: 4em;
}

/* Blog post or page title */

.page-title,
.post-list-title,
.post-list-title a {
    color: var(--post-title-color);
}

.page-title,
.post-list-title {
    margin-top: 0;
}

.post-list-icon {
    float: left;
    margin-top: -2.1rem;
    margin-left: -3rem;
    width: 2rem;
}

.post-list-extra-post-icon {
    display: inline-block;
    width: 1em;
    vertical-align: top;
    margin-right: 0.1rem;
}

.post-title {
    margin-bottom: 0.5rem;
}

.post-title h1 {
    display: inline;
}

.post-icon {
    display: inline-block;
    padding-top: 0rem;
    margin-left: 0.8rem;
    margin-top: -2rem;
    margin-bottom: -2rem;
    width: 3rem;
    vertical-align: -1rem;
}

/* Meta data line below post title */
.post-date {
    display: block;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    color: #9a9a9a;
}

/* Related posts */
.related {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid #eee;
}
.related-posts {
    padding-left: 0;
    list-style: none;
}
.related-posts h3 {
    margin-top: 0;
}
.related-posts li small {
    font-size: 75%;
    color: #999;
}
.related-posts li a:hover {
    color: #268bd2;
    text-decoration: none;
}
.related-posts li a:hover small {
    color: inherit;
}

/*
   * Pagination
   *
   * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
   * there are no more previous or next posts to show.
   */

.pagination {
    overflow: hidden; /* clearfix */
    margin-left: -1rem;
    margin-right: -1rem;
    font-family: "PT Sans", Helvetica, Arial, sans-serif;
    color: #ccc;
    text-align: center;
}

/* Pagination items can be `span`s or `a`s */
.pagination-item {
    display: block;
    padding: 1rem;
    border: 1px solid #eee;
}
.pagination-item:first-child {
    margin-bottom: -1px;
}

/* Only provide a hover state for linked pagination items */
a.pagination-item:hover {
    background-color: #f5f5f5;
}

@media (min-width: 30rem) {
    .pagination {
        margin: 3rem 0;
    }
    .pagination-item {
        float: left;
        width: 50%;
    }
    .pagination-item:first-child {
        margin-bottom: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .pagination-item:last-child {
        margin-left: -1px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    padding: 0;
    color: var(--heading-code-color);
    font-size: 90%;
    background-color: inherit;
}

.masthead-title {
    font-size: 1.25rem;
    display: inline;
}

.masthead p {
    font-size: 1.25rem;
    display: inline;
    margin: 0;
    margin-left: 1rem;
    padding: 0;
    line-height: 1;
}

.front-page-introduction {
    margin-bottom: 2rem;
}

.navigation {
    float: right;
}

.navigation img {
    height: 1em;
    vertical-align: baseline;
    display: inline-block;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

main img {
    max-width: 100%;
    margin: auto;
}

.post {
    margin-bottom: 2em;
}

.post:last-child {
    margin-bottom: 0em;
}

.frontpage-section {
    margin-bottom: 2rem;
}

.posts {
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-radius: 5px;
    margin-bottom: 2rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.posts ul {
    padding-left: 3rem;
}

.posts li {
    list-style-type: none;
}

.posts.neutral {
    border: 2px solid #999;
}

.posts.subscribe {
    border: 2px solid #aaa;
}

.posts.bare-bones {
    background-color: var(--background-color-section-bare-bones);
    border: 2px solid var(--border-color-section-bare-bones);
}

.posts.basic-i-o {
    background-color: var(--background-color-section-basic-io);
    border: 2px solid var(--border-color-section-basic-io);
}

.posts.memory-management {
    border: 2px solid #fc0;
}

.posts.interrupts {
    border: 2px solid #f66;
}

.posts.multitasking {
    border: 2px solid #556b2f;
}

.posts hr {
    margin: 2rem 0;
}

.post-summary {
    margin-bottom: 1rem;
}

.post-summary p {
    display: inline;
}

.read-more {
    margin-left: 5px;
}

.no-translation {
    margin-top: 0.3rem;
    color: #999999;
}

.translation_contributors {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

.post-category {
    margin-right: 0.5rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    text-align: right;
}

.post-category.bare-bones {
    color: #55d;
}

.post-category.memory-management {
    color: #990;
}

.post-category.interrupts {
    color: #f33;
}

.post-category.multitasking {
    color: #556b2f;
}

.post-footer-support {
    margin-top: 2rem;
}

.PageNavigation {
    font-size: 0.9em;
    display: table;
    width: 100%;
    overflow: hidden;
}

.PageNavigation a {
    display: table-cell;
}

.PageNavigation .previous {
    text-align: left;
}

.PageNavigation .next {
    text-align: right;
}

footer.footer {
    margin-top: 1rem;
    margin-bottom: 1rem;

    .spaced {
        margin-left: 0.5rem;
    }
}

.footnotes {
    font-size: 85%;
}

.footnotes li {
    margin-bottom: 1rem;
}

sup,
sub {
    line-height: 0;
}

a.anchorjs-link:hover {
    text-decoration: none;
}

#toc-aside {
    display: none;
}

#toc-inline summary {
    margin-bottom: 0.2rem;
}

aside#all-posts-link {
    font-size: 90%;
    margin-top: 0.5rem;
}

@media (min-width: 80rem) {
    #toc-inline {
        display: none;
    }

    #toc-aside {
        display: block;
        width: 12rem;
        position: sticky;
        float: left;
        top: 3.5rem;
        margin-top: -4rem;
        margin-left: -15rem;
        font-size: 90%;
        line-height: 1.2;
    }

    #toc-aside li > a,
    #toc-aside h2 {
        opacity: 0.5;
        transition: opacity 0.5s;
    }

    #toc-aside:hover li > a,
    #toc-aside:hover h2 {
        opacity: 1;
    }

    #toc-aside li.active > a {
        font-weight: bold;
    }

    #toc-aside h2 {
        font-size: 110%;
        margin-bottom: 0.2rem;
    }

    #toc-aside ol {
        margin: 0 0 0.2rem 0;
        padding: 0 0 0 1rem;
        list-style: none;
    }

    #toc-aside ol li a:before {
        content: "";
        border-color: transparent #008eef;
        border-style: solid;
        border-width: 0.35em 0 0.35em 0.45em;
        display: block;
        height: 0;
        width: 0;
        left: -1em;
        top: 0.9em;
        position: relative;
    }

    #toc-aside.coarse li ol {
        display: none;
    }

    aside.page-aside-right {
        position: absolute;
        min-width: 11rem;
        max-width: 17rem;
        top: 4rem;
        margin-left: 45rem;
        margin-right: 2rem;
        font-size: 90%;
    }

    aside.page-aside-right .block {
        margin-bottom: 1.5rem;
    }

    aside.page-aside-right h2 {
        font-size: 110%;
        margin-bottom: 0.2rem;
    }

    aside.page-aside-right ul {
        margin: 0 0 0.2rem 0;
        padding: 0 0 0 1rem;
    }

    aside.page-aside-right ul li {
        margin-top: 0.5rem;
    }

    #language-selector li {
        margin-top: 0;
    }

    aside#all-posts-link {
        position: fixed;
        top: 1.25rem;
        margin-top: 0;
        margin-left: -15rem;
    }
}

aside.page-aside-right time {
    color: #9a9a9a;
}

a code {
    color: var(--link-color);
}

a.zola-anchor {
    opacity: 0;
    position: absolute;
    margin-left: -1.5em;
    padding-right: 1em;
    font-size: 0.6em;
    vertical-align: baseline;
    line-height: 2em;
}

:hover > a.zola-anchor {
    opacity: 1;
    text-decoration: none;
}

a.zola-anchor:hover {
    text-decoration: none;
}

.note {
    padding: 0.7rem 1rem;
    margin: 1rem 0.2rem;
    border: 2px solid var(--border-color-note);
    border-radius: 3px;
    background-color: var(--background-color-note);
}

.note details p:first-of-type {
    margin-top: 1rem;
}

.note p:last-child {
    margin-bottom: 0;
}

div.warning {
    padding: 0.7rem 1rem;
    margin: 1rem 0.2rem;
    border: 2px solid orange;
    border-radius: 5px;
    background-color: #ffa50022;
}

div.warning p:last-child {
    margin-bottom: 0;
}

div.warning h2 {
    margin-top: 0rem;
}

form.subscribe {
    margin: 1rem;
}

div.subscribe-fields {
    display: flex;
}

form.subscribe input {
    padding: 0.5rem;
    border: 1px solid #e5e5e5;
}

form.subscribe input[type="email"] {
    flex: 1;
}

form.subscribe input[type="submit"] {
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

/* Asides */
aside.post_aside {
    font-style: italic;
    padding: 0rem 1rem 0rem;
    margin: 0.8rem 0;
    border-left: 0.1rem solid #e5e5e5;
    border-right: 0.1rem solid #e5e5e5;
}

details summary {
    cursor: pointer;
}

details summary h3,
details summary h4,
details summary h5,
details summary h6 {
    display: inline;
}

details :hover > a.zola-anchor {
    opacity: 0;
}

.gh-repo-box {
    border: 1px solid var(--gh-repo-box-border-color);
    border-radius: 3px;
    padding: 16px;
    margin-top: 0.5rem;
    font-size: 80%;
}

.gh-repo-box .repo-link {
    color: var(--link-color);
    font-weight: 600;
    font-size: 120%;
    margin-left: 0.2rem;
}

.gh-repo-box .subtitle {
    margin-bottom: 16px;
}

.gh-repo-box .stars-forks {
    margin-bottom: 0;
}

.gh-repo-box .stars-forks a {
    color: var(--text-color);
    opacity: 0.7;
}

.gh-repo-box .stars-forks a:hover {
    color: var(--link-color);
    text-decoration: none;
    opacity: 1;
}

.gh-repo-box svg {
    vertical-align: text-bottom;
    fill: currentColor;
}

.gh-repo-box .stars {
    display: inline-block;
}

.gh-repo-box .forks {
    display: inline-block;
    margin-left: 16px;
}

.gh-repo-box .sponsor {
    display: inline-block;
    margin-left: 16px;
}

.hidden {
    display: none;
}

.toc-comments-link {
    margin-top: 0.5rem;
}

h5 {
    font-style: italic;
    font-size: 0.9rem;
}
.gray {
    color: gray;
}

a strong {
    color: #268bd2;
}

.right-to-left {
    direction: rtl;
    font-family: Vazir;
}

.left-to-right,
.right-to-left pre,
.right-to-left table,
.right-to-left[id="toc-aside"] {
    direction: ltr;
}

.status-update-list li {
    margin-bottom: 0.5rem;
}

.giscus {
    margin-top: 1.5rem;
}

img {
    background-color: white;
}

/* Manual switch between dark and light mode */

.theme-switch {
    margin-bottom: 1rem;

    @media (min-width: 58rem) {
        position: fixed;
        left: 2rem;
        bottom: 2rem;
        margin-bottom: 0rem;
    }
}

.theme-switch-inline {
    @media (min-width: 58rem) {
        display: none;
    }

    font-style: italic;

    .switches {
        vertical-align: top;
        margin-left: 1rem;
    }
}

.light-switch {
    @mixin light-switch-light {
        // icon: https://icons.getbootstrap.com/icons/moon-fill/ (MIT licensed)
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004' class='bi bi-moon' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.53 10.53a7 7 0 0 1-9.058-9.058A7.003 7.003 0 0 0 8 15a7.002 7.002 0 0 0 6.53-4.47z'/%3E%3C/svg%3E");
    }

    @mixin light-switch-dark {
        // icon: https://icons.getbootstrap.com/icons/brightness-high-fill/ (MIT licensed)
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9' class='bi bi-brightness-high-fill' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E");
    }

    display: inline-block;
    @include light-switch-light();

    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    opacity: 0.6;

    &:hover {
        transform: scale(1.3);
        transition: 200ms ease-out;
        opacity: 1;
    }

    [data-theme="dark"] & {
        @include light-switch-dark();
    }

    @media (prefers-color-scheme: dark) {
        @include light-switch-dark();

        [data-theme="light"] & {
            @include light-switch-light();
        }
    }
}

/* Clear theme override and go back to system theme */

.light-switch-reset {
    @mixin light-switch-reset-light {
        // icon: https://icons.getbootstrap.com/icons/x-circle-fill/ (MIT licensed)
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    }

    @mixin light-switch-reset-dark {
        // icon: https://icons.getbootstrap.com/icons/x-circle-fill/ (MIT licensed)
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    }

    @include light-switch-reset-light();
    vertical-align: bottom;
    margin-left: 0.5rem;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    opacity: 0.6;

    visibility: hidden;
    display: inline-block;
    [data-theme="light"] & {
        visibility: visible;
    }
    [data-theme="dark"] & {
        @include light-switch-reset-dark();
        visibility: visible;
    }

    @media (min-width: 80rem) {
        position: fixed;
        left: 4.5rem;
        bottom: 2rem;
    }

    &:hover {
        transform: scale(1.1);
        transition: 200ms ease-out;
        opacity: 1;
    }
}


.post-extra-content {
    margin-top: 1rem;

    h4 {
        display: inline;
        margin-right: 1rem;
    }

    a {
        font-weight: bold;
    }
}