
/*
 * base stylesheets included in every chart
 */

{% for name, urls in fonts %}
    {% if urls.method == "import" %}
        @import '{{ urls.import | raw }}';
    {% else %}
        @font-face {
            font-family: "{{ name }}";
            src: url('{{ urls.files.eot }}');
            src: url('{{ urls.files.eot }}?#iefix') format('embedded-opentype'),
            url('{{ urls.files.woff }}') format('woff'),
            url('{{ urls.files.ttf }}') format('truetype'),
            url('{{ urls.files.svg }}#{{ name }}') format('svg');
        }
    {% endif %}

{% endfor %}

.chart {
    {% if typography_chart_typeface %}
        font-family: @typography_chart_typeface;
    {% endif %}

    {% if typography_chart_color %}
        color: @typography_chart_color;
    {% endif %}

    font-size: 12px;

    {% if colors_general_background %}
        background: @colors_general_background;
    {% endif %}

    {% if colors_general_padding %}
        padding: ~'@{colors_general_padding}px';
    {% endif %}
    
    margin: 0 0px;
    height: 100%;

    #header {
        min-height: 1px;
        position: relative;
        .header-right {
            position: absolute;
            right: 10px;
            z-index: 20;
        }
    }

    #chart, .dw-chart-body {
        margin-top: 10px;
    }

    h1 {
        {% if typography_headline_typeface %}
            font-family: @typography_headline_typeface;
        {% endif %}

        {% if typography_headline_fontWeight %}
            font-weight: @typography_headline_fontWeight;
        {% endif %}

        {% if typography_headline_fontSize %}
            font-size: ~'@{typography_headline_fontSize}px';
        {% endif %}

        {% if typography_headline_lineHeight %}
            line-height: @typography_headline_lineHeight;
        {% endif %}

        {% if typography_headline_cursive %}
            font-style: italic;
        {% else %}
            font-style: normal;
        {% endif %}
    
        {% if typography_headline_underlined %}
            text-decoration: underline;
        {% else %}
            text-decoration: none;
        {% endif %}

        {% if typography_headline_color%}
            color: @typography_headline_color;
        {% endif %}

        margin: 0 0 10px;
        text-align: left;
    }


    p {
        {% if typography_description_typeface %}
            font-family: @typography_description_typeface;
        {% endif %}
    
        {% if typography_description_fontWeight %}
            font-weight: @typography_description_fontWeight;
        {% endif %}
    
        {% if typography_description_fontSize %}
            font-size: ~'@{typography_description_fontSize}px';
        {% endif %}

        {% if typography_description_lineHeight %}
            line-height: @typography_description_lineHeight;
        {% endif %}

        {% if typography_description_cursive %}
            font-style: italic;
        {% else %}
            font-style: normal;
        {% endif %}
    
        {% if typography_description_underlined %}
            text-decoration: underline;
        {% else %}
            text-decoration: none;
        {% endif %}
        
        {% if typography_description_color%}
            color: @typography_description_color;
        {% endif %}
        
        margin: 5px 0 10px !important;
        line-height: 17px;
    }

    .dw-chart-notes {
        {% if typography_notes_typeface %}
            font-family: @typography_notes_typeface;
        {% endif %}
    
        {% if typography_notes_fontWeight %}
            font-weight: @typography_notes_fontWeight;
        {% endif %}
    
        {% if typography_notes_fontSize %}
            font-size: ~'@{typography_notes_fontSize}px';
        {% endif %}
    
        {% if typography_notes_lineHeight %}
            line-height: @typography_notes_lineHeight;
        {% endif %}

        {% if typography_notes_cursive %}
            font-style: italic;
        {% else %}
            font-style: normal;
        {% endif %}
    
        {% if typography_notes_underlined %}
            text-decoration: underline;
        {% else %}
            text-decoration: none;
        {% endif %}

        {% if typography_notes_color%}
            color: @typography_notes_color;
        {% endif %}

        margin-bottom: 5px;
        position: relative;
        margin-top: 10px;
    }
    #footer, .dw-chart-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        & > div > a::before, & > div > .source-block::before {
            content: "•";
            display: inline-block;
            margin-right: 4px;
        }

        & > div > a:first-child::before, & > div > .source-block:first-child::before {
            content: "";
            margin-right: 0px;
        }

        {% if typography_footer_typeface %}
            font-family: @typography_footer_typeface;
        {% endif %}
    
        {% if typography_footer_fontWeight %}
            font-weight: @typography_footer_fontWeight;
        {% endif %}
    
        {% if typography_footer_fontSize %}
            font-size: ~'@{typography_footer_fontSize}px';
        {% endif %}
    
        {% if typography_footer_lineHeight %}
            line-height: @typography_footer_lineHeight;
        {% endif %}

        {% if typography_footer_cursive %}
            font-style: italic;
        {% else %}
            font-style: normal;
        {% endif %}
    
        {% if typography_footer_underlined %}
            text-decoration: underline;
        {% else %}
            text-decoration: none;
        {% endif %}

        {% if typography_footer_color %}
            color: @typography_footer_color;
        {% endif %}
            
        a {
            {% if typography_links_typeface %}
                font-family: @typography_links_typeface;
            {% endif %}
    
            {% if typography_links_fontWeight %}
                font-weight: @typography_links_fontWeight;
            {% endif %}
    
            {% if typography_links_lineHeight %}
                line-height: @typography_links_lineHeight;
            {% endif %}
    
            {% if typography_links_cursive %}
                font-style: italic;
            {% else %}
                font-style: normal;
            {% endif %}
    
            {% if typography_links_underlined %}
                text-decoration: underline;
            {% else %}
                text-decoration: none;
            {% endif %}
    
            {% if typography_links_color %}
                color: @typography_links_color;
            {% endif %}
        }

    }

    a img {
        border: 0px;
    }

    .embed-code {
        position: absolute;
        bottom: 20px;
        left: 0;
        padding: 15px;
        background: #eee;
        color: #000;
        border-radius: 6px;
        text-transform: none;
        font-size: 1em;
        box-shadow: 2px 2px 0px rgba(0,0,0,.4);
        z-index: 1;
    }

    .embed-code textarea {
        width: 90%;
        margin-top: 2%;
        height: 7em;
    }

    .hide {
        display: none;
    }

    .embed-code .close {
        cursor: pointer;
        position: absolute;
        right: 2%;
        top: 2%;
        font-size: 1.125em;
        opacity: 0.7;
    }

    .embed-code .close:hover {
        opacity: 1;
    }

    .label {
        font-size: 12px;

        span {
            color: #333;
            text-shadow: 0 0 2px #fff;
        }

        &.inverted span {
            text-shadow: 0 0px 2px #000000;
            color: #fff;
        }

        &.outline span {
            text-shadow: 0 1px 0 #FFFFFF, 1px 0 0 #FFFFFF, 0 -1px 0 #FFFFFF, -1px 0 0 #FFFFFF,
            1px 1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF,
            0 2px 1px #FFFFFF, 2px 0 1px #FFFFFF, 0 -2px 1px #FFFFFF, -2px 0 1px #FFFFFF,
            -1px 2px 0px #FFFFFF, 2px -1px 0px #FFFFFF, -1px -2px 0px #FFFFFF, -2px -1px 0px #FFFFFF,
            1px 2px 0px #FFFFFF, 2px 1px 0px #FFFFFF, 1px -2px 0px #FFFFFF, -2px 1px 0px #FFFFFF;

            sup {
                text-shadow: none;
            }
        }

        &.highlighted {
            font-weight: bold;
        }

        &.highlighted, .label.axis {
            font-size: 12px;
            z-index: 100;
        }

        &.hover {
            font-weight: bold;
        }

        &.value span {
            font-size: 12px;
        }

        &.series span {
            font-size: 12px;
        }

        &.rotate90 {
            -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

        &.smaller span {
            font-size: 80%;
        }
    }

    .tooltip {
        z-index: 200;
        padding-bottom: 0px;

        .content {
            background-color: #fff;
            border: 1px solid #888;
            box-shadow: 2px 2px 2px rgba(0,0,0,.2);
            padding: 5px 8px;
        }

        label {
            font-weight: 700;
        }

        label:after {
            content: ": ";
        }
    }

    .logo {
        position: absolute;
        right: 0;
        bottom: 0;
        .big {
            display: none;
        }
    }

    svg .axis, svg .tick, svg .grid, svg rect {
        shape-rendering: crispEdges;
    }

    .filter-links {
        height: 30px;
        overflow-x: hidden;
        overflow-y: hidden;
        border-bottom: 1px solid #ccc;
        font-size: 12px;


        a {
            color: #666;
            height: 28px;
            line-height: 28px;
            padding: 10px;
            text-decoration: none;

            &:hover {
                background: #fff;
                color: #222;
            }

            &.active {
                font-weight: bold;
                color: #000;
                box-shadow: none;
                background: #fff;
                cursor: default;
                text-decoration: none;

                border-bottom: 3px solid #555;
                padding: 10px 10px 6px 10px;
            }
        }
    }

    .filter-select {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 4px 4px 4px 4px;
        padding: 4px 6px;
        vertical-align: middle;
        font-size: 12px;
    }

    &.plain #footer {
        height: 10px;
    }

    &.js .noscript {
        display: none;
    }

    .hidden {
        display: none;
    }

    .label.annotation span {
        background: transparent;
    }

    .legend-item.hover .label {
        font-weight: bold;
    }

}


.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.point {
    border: 1px solid #ccc;
    display: inline-block;
    position: absolute;
    background: #fff;
    z-index: 100;
    cursor: pointer;

    height: 20px;
    width: 20px;
    border-radius: 20px;
    top: 20px;

    &:hover {
        background: #ebebeb;
    }

    &.active {
        background: #ccc;
        height: 20px;
        width: 20px;
        border-radius: 20px;
        top: 20px;
        border-color: #888;
    }
}

.point-label {
    position: absolute;
}

.line {
    height: 1px;
    background: #ccc;
    position: absolute;
    left: 0px;
    top: 30px;
    z-index: 1;
}

.vis-pie-chart path,
.vis-donut-chart path,
.vis-election-donut-chart path {
    stroke-width: 0.5;
}