$color-primary-dark: #8aa2d3; // https://irocore.com/aofuji/
$color-primary-dark-dark: #e6e6e6; // https://irocore.com/shironezumi/
$color-secondary-dark: #bab1df; // https://irocore.com/fujimurasaki/
$color-mute-dark: #9ea1a3; // https://irocore.com/suzu-iro/
$color-font-dark: #c0c0c0; // https://irocore.com/gin-iro/
$color-divider-dark: #4d5158; // discord
$color-bg-dark: #2f3136; // discord

$divider-dark: 2px solid $color-divider-dark;

@mixin link-1 {
    a {
        color: $color-primary-dark;
    }

    a:hover {
        color: $color-secondary-dark;
    }
}

@mixin link-2 {
    a {
        color: $color-secondary-dark;
    }

    a:hover {
        color: $color-primary-dark-dark;
    }
}

body[data-theme='dark'] {
    background-color: $color-bg-dark;
    color: $color-font-dark;

    @include link-1();

    .post-summary,
    .post-meta {
        @include link-2();
    }

    .pag-current a,
    .pag-current a:hover {
        color: $color-primary-dark-dark;
    }

    .title-sub,
    .post-meta {
        color: $color-mute-dark;
    }

    header,
    .page-info {
        border-bottom: $divider-dark;
    }

    .post + .post,
    .pagination,
    footer {
        border-top: $divider-dark;
    }

    .post-meta-archive {
        @include link-2();

        color: $color-mute-dark;
    }

    @media screen and (max-width: $width-md) {
        .sidebar {
            border-top: $divider-dark;
        }
    }

    // single page part
    .post-content {
        @include link-2();
    }

    .markdown-body {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: $color-primary-dark;
        }

        h1,
        h2 {
            border-bottom: $divider-dark;
        }

        blockquote {
            color: $color-mute;
        }

        img {
            border-radius: 2px;
            background-color: inherit; // fix white pixels under border-radius
        }

        hr {
            height: 2px;
        }

        pre,
        code {
            background-color: $color-divider-dark;
        }
    }

    .post-loading,
    .post-comment .utterances-frame,
    .post-comment #disqus_thread {
        border-top: $divider-dark;
    }

    // components
    .btn {
        div {
            background-color: $color-divider-dark;
            color: $color-primary-dark;
        }

        div:hover {
            background-color: $color-primary-dark;
            color: $color-divider-dark;
        }

        div + div {
            border-top: 2px solid $color-bg-dark;
        }
    }

    // highlight.js theme [solarized-dark]
    .hljs {
        display: block;
        overflow-x: auto;
    }
    .hljs-comment,
    .hljs-quote {
        color: #85aab6;
    }
    .hljs-addition,
    .hljs-keyword,
    .hljs-selector-tag {
        color: #bad601;
    }
    .hljs-doctag,
    .hljs-literal,
    .hljs-meta .hljs-meta-string,
    .hljs-number,
    .hljs-regexp,
    .hljs-string {
        color: #38cfc3;
    }
    .hljs-name,
    .hljs-section,
    .hljs-selector-class,
    .hljs-selector-id,
    .hljs-title {
        color: #479fdf;
    }
    .hljs-attr,
    .hljs-attribute,
    .hljs-class .hljs-title,
    .hljs-template-variable,
    .hljs-type,
    .hljs-variable {
        color: #c9ac56;
    }
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-meta .hljs-keyword,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-subst,
    .hljs-symbol {
        color: #db835d;
    }
    .hljs-built_in,
    .hljs-deletion {
        color: #e27876;
    }
    .hljs-formula {
        background: #24849c;
    }
    .hljs-emphasis {
        font-style: italic;
    }
    .hljs-strong {
        font-weight: 600;
    }

    // diff from light
    img {
        filter: brightness(60%);
    }

    table {
        th,
        td {
            border-color: $color-font-dark;
        }

        tr {
            background-color: $color-bg-dark;
            border-color: $color-font-dark;

            &:nth-child(2n) {
                background-color: $color-divider-dark;
            }
        }
    }

    #post-aplayer {
        background-color: $color-divider-dark;
    }

    .aplayer .aplayer-info .aplayer-music .aplayer-author {
        color: $color-font-dark !important;
    }

    .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
        fill: $color-font-dark !important;
    }

    .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
        fill: $color-primary-dark-dark !important;
    }
}