{{ $c := hex2color .Color }}
{{ $themeDim := eq .Theme "dark" | ternary (lightness 0.35 $c) (lightness 0.75 $c) | color2css }}
{{ $themeDimmer := eq .Theme "dark" | ternary (lightness 0.3 $c) (lightness 0.8 $c) | color2css }}
{{ $themeDimmest := eq .Theme "dark" | ternary (lightness 0.2 $c) (lightness 0.85 $c) | color2css }}

{{ $linkColor := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.35 $c) | color2css }}
{{ $linkHoverColor := eq .Theme "dark" | ternary (lightness 0.65 $c) (lightness 0.45 $c) | color2css }}

:root {
    --theme-color: {{ $c | color2css }};
    --theme-color-dim: {{ $themeDim }};
    --theme-color-dimmer: {{ $themeDimmer }};
    --theme-color-dimmest: {{ $themeDimmest }};

    --link-color: {{ $linkColor }};
    --link-color-hover: {{ $linkHoverColor }};
}

.accent {
    background-color: {{ $themeDim }};
    background-color: var(--theme-dim);
}
.user-bar {
    border-bottom-color: {{ $themeDim }};
    border-bottom-color: var(--theme-dim);
}
header .content-title .subtitle {
    border-top-color: {{ $themeDim }};
    border-top-color: var(--theme-dim);
}

a, .thread:before, button, .button, input[type=button], input[type=submit] { 
    color: {{ $linkColor }};
    color: var(--link-color);
}
a:hover, button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover { 
    color: {{ $linkHoverColor }};
    color: var(--link-hover-color);
}
.unread .avatar-icon {
    border: 2px solid {{ $linkColor }};
    border: 2px solid var(--link-color);
}

.post-list-bg-odd:nth-of-type(odd) {
    background-color: {{ .PostBgColor }};
}

/*
TODO: Manually apply sensible tachyons classes to the elements styled below, then delete
all of this CSS.
*/

/* {% if theme == "dark" %}
    #search_form_input_homepage { color: #{% rgb_accent accent 0.65 %}; }
    #search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.65 %}; }
    #search_form_input_homepage:-moz-placeholder { color: #{% rgb_accent accent 0.65 %}; }
    #search_form_input_homepage::-moz-placeholder { color: #{% rgb_accent accent 0.65 %}; }
    #search_form_input_homepage:-ms-input-placeholder { color: #{% rgb_accent accent 0.65 %}; }
{% else %}
    #search_form_input_homepage { color: #{% rgb_accent accent 0.25 %}; }
    #search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.25 %}; }
    #search_form_input_homepage:-moz-placeholder { color: #{% rgb_accent accent 0.25 %}; }
    #search_form_input_homepage::-moz-placeholder { color: #{% rgb_accent accent 0.25 %}; }
    #search_form_input_homepage:-ms-input-placeholder { color: #{% rgb_accent accent 0.25 %}; }
{% endif %} */

/* {% if theme == "dark" %}
    header .menu-bar .logo { background-color: #{% rgb_accent accent 0.23 %}; }
    header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.27 %}; }
    header { border-bottom-color:#{% rgb_accent accent 0.33 %}; }
    .post .action.button { border-bottom-color:#{% rgb_accent accent 0.33 %}; }
    :root {
        --input-lite-border: #{% rgb_accent accent 0.33 %};
    }

    header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.23 %}; }
    header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.21 %}; }

    .forum .thread:nth-of-type(odd) { background-color:#{% rgb_accent accent 0.14 False 0.03%}; }
    .blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.14 False 0.03 %}; }
{% else %}
    header .menu-bar .logo { background-color: #{% rgb_accent accent 0.25 True %}; }
    header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.28 True %}; }
    header { border-bottom-color:#{% rgb_accent accent 0.18 %}; }
    .post .action.button { border-bottom-color:#{% rgb_accent accent 0.25 True %}; }
    :root {
        --input-lite-border: #{% rgb_accent accent 0.25 True %};
    }

    header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.20 %}; }
    header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.16 %}; }

    .forum .thread:nth-of-type(odd) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; }
    .blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; }
{% endif %} */

:root {
    --background-even-background: {{ .PostBgColor }};
}

/* Assets */

header .menu-bar .hmdev-logo.project {
    background-image:url("{{ static "logo_net.svg" }}");
}

.half.light {
    background-image:url("{{ statictheme "light" "accent_top_a.svg" }}");
}

.half.dark {
    background-image:url("{{ statictheme "dark" "accent_top_a.svg" }}");
}