{{ $themeDim := eq .Theme "dark" | ternary (darken .Color 0.5) (brighten .Color 0.2) }}
{{ $themeDimmer := eq .Theme "dark" | ternary (darken .Color 0.65) (brighten .Color 0.4) }}
{{ $themeDimmest := eq .Theme "dark" | ternary (darken .Color 0.8) (brighten .Color 0.6) }}

{{ $linkColor := eq .Theme "dark" | ternary (brighten .Color 0.1) (darken .Color 0.2) }}
{{ $linkHoverColor := eq .Theme "dark" | ternary (brighten .Color 0.2) (darken .Color 0.1) }}

:root {
    --theme-color: #{{ .Color }};
    --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);
}

/*
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: #{{ eq .Theme "dark" | ternary (darken .Color 0.8) (brighten .Color 0.9) }};
}

/* Assets */

header .menu-bar .hmdev-logo {
    background-image:url("{{ static "logo_nounder.svg" }}");
}
header .menu-bar .hmdev-logo .underscore {
    background-image:url("{{ static "logo_underscore.svg" }}");
}

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

.links .thing#projects {
    background-image:url("{{ statictheme .Theme "project_thing.svg" }}");
}

.links .thing#discussion {
    background-image:url("{{ statictheme .Theme "discuss_thing.svg" }}");
}

.links .thing#blogs {
    background-image:url("{{ statictheme .Theme "blog_thing.svg" }}");
}

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

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