$color-primary: #8aa2d3; // https://irocore.com/aofuji/
$color-primary-dark: #3b469b; // https://irocore.com/aomurasaki/
$color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/
$color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
$color-font: #3f4551; // https://irocore.com/konnezu/
$color-divider: #e5e2e4; // https://irocore.com/komachinezu/
$color-bg: #fffffd; // https://irocore.com/shiro/

$divider: 2px solid $color-divider;

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

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

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

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

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

    @include link-1();

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

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

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

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

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

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

        color: $color-mute;
    }

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

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

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

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

        blockquote {
            color: $color-mute;
        }

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

        hr {
            height: 2px;
        }
    }

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

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

            color: $color-primary;
        }

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

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

    // prism.js theme [olarized-light]
    @import '../../css/prism-solarizedlight';
}