@import 'colors';
@import 'palette'; /* algorithmic palette to visually link related info */

@keyframes scroll {

    0% {
    }

    100% {
        transform: translateY(-170px);
    }
}

@keyframes decorotion {
    0% {    
        transform: perspective(20px) rotateX(0.1deg) rotateY(0.1deg);
    }

    33% {    
        transform: perspective(20px) rotateX(0.1deg) rotateY(0);
    }

    67% {
        transform: perspective(20px) rotateX(0) rotateY(0.1deg);
    }

    100% {    
        transform: perspective(20px) rotateX(0.1deg) rotateY(0.1deg);
    }
}

@keyframes bump {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

svg {
    font-family: 'Clear Sans', sans;
}

svg#hexascroll {


    g#burncpu {
    
        transform: perspective(20px) rotateX(0.1deg) rotateY(0.1deg);
        transform-origin: center;

        &:target {
    
            animation: decorotion 5s linear infinite;

            use {
                /*animation: scroll 10s linear infinite; /* apply the animation to every hexagon instead of the g so we don't get perspective fuckups */*/
            }
        }
    }

    use {
        fill: opacify($color_background_dark, -0.2);
        stroke: $color_background_light;
        stroke-width: 2;

        &.hexagon {
            transition: fill 0.5s;

            &:hover {
                fill: $color_background_light !important;
            }

            &:nth-child(8n){
                /*animation: bump 2s linear infinite;*/
            }
        }
    }
}

svg.icon {
    
    path,
    use {    
        transition: stroke 0.3s linear, fill 0.3s linear;
    }

    path {
        stroke: $color_background_light;
        stroke-width: 2px;
        /*fill: $color_background_dark;*/

        &#active:target {
            stroke: $color_highlight;
        }
    }

    &#plus {

        path#active {
            fill: transparent;
        }

        path#active:target {
            stroke: $color_background_dark;
            /*fill: $color_highlight;*/
        }
    }
    
    g#dark:target { /* Dark variation of icons for use on light backgrounds */
        path,
        use {
            stroke: none;
            fill: $color_background_dark;
        }
    }

    g#active {
        path,
        use {
            stroke: none;
            fill: $color_background_light;
        }

        &:target {
            path,
            use {
                fill: $color_highlight;
            }
        }
    }
}

svg#checkbox {
    
    .box {
        stroke: $color_background_light;
        stroke-width: 2px;
        fill: transparent;
    }

    .check {
        stroke: transparentize($color_background_light, 100%);
        stroke-width: 2px;
        transition: stroke 0.3s linear;

        &:target {
            stroke: $color_highlight;
        }
    }
}


/** #DATAVIS# **/

/* infotexts / html embeds / general stuff*/

.fallback {

    overflow-y: scroll;

    .background {
        fill: $color_background_dark;
    }

    text {
        stroke: $color_font_light;
        font-size: 14px;
        font-weight: lighter;
    }

    .heading {
        font-weight: bold;
    }
}

.html {
    body {
        margin: 0;
        padding: 10px;
        overflow-y: auto;
        height: calc(100% - 20px);
        color: $color_font_light;

        h1 {
            margin-top: 0;
            font-size: 120%;
        }

        .footer {
            font-size: 80%;
        }
    }
}


.marker {

    opacity: 0.8;
    fill: desaturate($color_highlight, 20%);
    stroke-width: 2px;
    stroke: transparentize($color_background_light, 100%);
    transition: opacity 0.3s linear, fill 0.3s linear, stroke 0.3s linear;

}

.grid {

    line {
        stroke: opacify($color_font_light, -80%);
        stroke-width: 1px;
        stroke-linecap: butt; /* butts lol */

        &.highlighted {
            stroke: opacify($color_font_light, -50%);
        }
    }

    .grid-label {
        fill: $color_font_light;
        font-size: 12px;
    }
}

/* ## COMMON STUFF FOR PLOTS AND MAPS */

.plot .dataset,
.map .datapoint {

    g.description {

        transform: translateY(350px);
        transition: transform 0.3s linear;

        .description-background {
            fill: $color_background_dark;
        }

        .html {

            body {

                margin: 0;
                padding: 0;
                height: 100%;
                color: $color_font_light;
                overflow-y: auto;

                object, img {
                    max-width: 100%;
                }
            }
        }

        .fallback {

            overflow-y: auto;

            text {
                fill: $color_font_light;
            }
        }
    }

    &:target { /* dataset descriptions should only be shown when they are referenced by #fragment */
        g.description {
            transform: translateY(0);
        }
    }

}

/* ## PLOTS ## */
.plot {

    /*background: $color_background_dark;*/

    .plot-inner {
        overflow: visible;

        g.datasets {

            g.dataset {

                .dataset-name {
                    fill: $color_highlight;
                    stroke: $color_font_light;
                    stroke-width: 4px;
                    paint-order: stroke;
                    transition: fill 0.3s linear;
                }

                .dataset-line {
                    opacity: 0.4;
                    stroke-width: 2px;
                    fill: none;
                    transition: opacity 0.3s linear;
                }

                &:hover,
                &:focus,
                &:target {

                    .dataset-line {
                        opacity: 1;
                    }

                }
            
                g.datapoint {
                    opacity: 0.7;

                    g.error {
                        /* not quite sure why i need to supply those things again in here. firefox fuckup? something to do with <g> scoping (but why haven't i noticed it elsewhere then? */
                        opacity: 0.3;
                        transition: opacity 0.3s linear;
                        line {
                            stroke-width: 2px;
                        }
                    }
                        
                    text.datapoint-value {
                        opacity: 0;
                        pointer-events: none; /* means :hover won't trigger on this and we can animate opacity properly (as opposed to using display: none) */
                        stroke: $color_font_light;
                        stroke-width: 4px;
                        paint-order: stroke;
                        transition: display 0.3s linear, opacity 0.3s linear;
                    }

                    &:hover,
                    &:focus,
                    &:target {

                        .marker {

                            opacity: 1;
                            stroke: opacify($color_background_light, 100%);
                        }

                        g.error {
                            opacity: 1;
                        }

                        text.datapoint-value {

                            display: initial;
                            opacity: 1;
                        }
                    }
                }
            }

            /* palettize datasets */
            @for $i from 1 through $palette_size {

                $color: nth($palette, $i);

                g.dataset:nth-child(#{$i}n+#{$i}) {
                
                    .dataset-name {
                        stroke: darken($color, 30%);
                        fill: desaturate($color, 80%);
                    }


                    .dataset-line {
                        stroke: desaturate(opacify($color, 100%), 80%);
                    }
                        
                    g.datapoint {

                        .marker {
                            fill: desaturate($color, 20%);
                        }

                        g.error {
                            line {
                                stroke: desaturate(opacify($color, 100%), 80%);
                            }
                        }

                        text.datapoint-value {
                            stroke: darken($color, 30%);
                            fill: lighten($color, 80%);
                        }

                        &:hover,
                        &:focus,
                        &:target {

                            .marker {
                                fill: $color;
                            }
                        }
                    }

                    &:hover,
                    &:focus,
                    &:target {

                        .dataset-name {
                            fill: lighten($color, 80%);
                        }
                    }
                }
            }
        }
    }

    .axis-label {

        font-size: 14px;
        fill: $color_font_light;

    }
}


/* ## MAPS ## */

svg.map {

    .geojson-render path {
        stroke: $color_highlight;
        stroke-width: 1px;
        fill: $color_background_dark;
    }

    .terrain {

        .ocean {
            fill: darken($color_highlight, 45%);
        }

        /*.country {*/
        path {

            stroke: opacify($color_background_light, -20%);
            stroke-width: 1px;
            stroke-miterlimit: 1;
            fill: opacify($color_background_dark, -20%);
            transition: fill 0.3s linear, stroke 0.3s linear;

            g,
            path {
                stroke-width: 0.1rem;
            }
        }
    }

    g.datapoints {


        g.datapoint {

            .marker,
            g.feature path {
                transition: fill 0.3s, stroke 0.3s;
            }

            /* palettize data */
            @for $i from 1 through $palette_size {

                $color: nth($palette, $i);

                &:nth-child(#{$i}n+#{$i}) {

                    .marker {
                        fill: desaturate($color, 20%);
                    }

                    g.feature path {
                        fill: opacify($color, -65%);
                        stroke: opacify($color_background_light, -50%);
                    }


                    &:hover,
                    &:focus,
                    &:target {

                        .marker {
                            fill: $color;
                            stroke: $color_background_light;
                        }
                        g.feature path {
                            fill: opacify($color, -55%);
                            stroke: opacify($color_background_light, -40%);
                        }
                    }
                }
            }
        }
    }
}


@import 'svg-custom';
