@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;

    rect.background {
        fill: $color_background_dark;
    }
}

text {
    fill: $color_font_light;
}

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;*/
        }
    }

    &#messages {

        circle {
            fill: $color_background_dark;
        }

        path {
            stroke: none;
            opacity: 0;
        }

        path:target {
            opacity: 1;
        }

        #message {
            stroke: #af0;
            stroke-width: 2px;
        }

        #warning {
            fill: #fa0;
        }

        #error {
            fill: #f0a;
        }
    }

    &#data {

        #column-0 {
            .cell {
                --color-inactive: rgba(255,0,0, 0.2);
                --color-active: rgba(255,0,0, 0.8);
            }
        }

        #column-1 {
            .cell {
                --color-inactive: rgba(255,255,0, 0.2);
                --color-active: rgba(255,255,0, 0.8);
            }
        }

        #column-2 {
            .cell {
                --color-inactive: rgba(0,255,0, 0.2);
                --color-active: rgba(0,255,0, 0.8);
            }
        }

        #column-3 {
            .cell {
                --color-inactive: rgba(0,0,255, 0.2);
                --color-active: rgba(0,0,255, 0.8);
            }
        }

        .cell {
            fill: var(\--color-inactive);
        }

        #filter:target {

            .cell {
                fill: transparent;
            }

            #column-0 .cell.row-1,
            #column-1 .cell.row-3,
            #column-2 .cell.row-0,
            #column-2 .cell.row-1,
            #column-2 .cell.row-3,
            #column-3 .cell.row-0,
            #column-3 .cell.row-2 {
                fill: var(\--color-active);
            }
        }
    }

    &#layers {
        rect {
            fill: transparent;
            stroke: black;
        }

        use.optional {
            visibility: hidden;

            &:target {
                visibility: visible;
            }
        }

        svg.layer {

            overflow: visible;

            rect, line {
                fill: transparent;
                stroke: var(\--color-inactive);
                stroke-width: 2px;
                vector-effect: non-scaling-stroke;
            }


            &#layer-0 {
                --color-inactive: desaturate(rgb(255,0,0), 50);
                --color-active: rgb(255,0,0);
            }

            &#layer-1 {
                --color-inactive: desaturate(rgb(0,255,0), 50);
                --color-active: rgb(0, 255,0);
            }
            &#layer-2 {
                --color-inactive: desaturate(rgb(0,0,255), 50);
                --color-active: rgb(0,0,255);
            }
        }
    }

    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;
    }
}

.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;
    }
}

/* ## PLOTS ## */

#background {
    fill: $color_background_dark;
}

html svg #background {
    fill: none;
}



.layer {

    stroke-width: 2px;

    line {
        stroke: var(\--palette-color);
        fill: none;
    }

    .layer-name {
        paint-order: stroke fill;
        fill: $color_font_light;
        stroke: var(\--palette-color);
    }

    g.datapoint {

        text {
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s linear;
            stroke: var(\--palette-color);
            paint-order: stroke fill;
        }

        .marker {
            fill: var(\--palette-color);
        }

        &:hover {
            text {
                pointer-events: auto;
                opacity: 1;
            }
        }

        &:target {
            text {
                pointer-events: auto;
                opacity: 0.5;
            }
        }

    }


}

.axis-labels {
    rect {
        fill: var(\--palette-color);
    }
}



.plot {

    svg.plot-inner{
        overflow: auto;

        .layer {
            opacity: 0.4;
            transition: opacity 0.3s linear;

            &:hover {
                opacity: 1;
            }
        }
    }



    .description {

        .description-exit {
            transform: translateY(-20%);
            transition: transform 0.3s linear;

        }
    
        svg.targetted-layer-wrapper {
        overflow: auto;

            .targetted-layer {
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.3s linear;
            }

            .datapoint {
                opacity: 0;
            }
        }

        svg.targetted-point-wrapper {
            pointer-events: none;
            opacity: 0;

            .marker {
                fill: var(\--palette-color);
                stroke: white;
                stroke-width: 2px;
            }
        }


        foreignObject {
            pointer-events: none;
        }

        .html {

            pointer-events: auto;
            overflow: hidden;
            transform: translateY(100vh);
            transition: transform 0.3s linear;
            max-width: 80ex;
            height: 100%;
            margin: 0 auto;
            color: $color_font_light;

            .description-title {
                display: block;
                position: sticky;
                text-overflow: ellipsis;
                box-sizing: border-box;
                height: 3rem;
                top: 0;
                text-align: center;
                margin: 0;
                padding: 1rem 0;
                background: $color_background_light;
                color: $color_font_dark;
                font-family: 'Orbitron';
                font-size: 1.4rem;
                text-shadow: 0 0 0.3rem var(\--palette-color);
            }

            .content {
                overflow-y: auto;
                box-sizing: border-box;
                background: $color_background_dark;
                height: calc(100% - 3rem);
                padding: 1rem;
            }
        }
    
        &:target {

            pointer-events: auto;

            .html {
                transform: translateY(0);
            }

            svg.targetted-layer-wrapper {
                .targetted-layer {
                    pointer-events: none;
                    opacity: 0.7;
                }
            }

            svg.targetted-point-wrapper {
                opacity: 1;
            }

            .description-exit {
                transform: translateY(0);
            }
        }

    }

    &.barchart {
        rect.bar {
            fill: var(\--palette-color);
        }
    }

}

/* ## PLOT SHADOW DOMS */
div.exit-wrapper {
    pointer-events: auto;
    max-width: 80ex;
    height: 100%;
    margin: 0 auto;
    padding: 0;

    .hug, svg {
        padding: 0;
        margin: 0;
        display: inline-block;
        position: relative;
    }

    .hug {
        background: $color_background_dark;
        max-width: calc(40ex - 10vh - 1px); /* -1px because firefox otherwise glitches out */
        width: calc(50% - 10vh - 1px);
        height: 100%;
    }

    svg {

        circle {
            fill: transparentize($color_background_light, 60%);
        }

        .background {
            fill: $color_background_dark;
        }

        .x, .circle-border {
            fill: var(\--palette-color);
        }
    }
}

/* ## MAPS ## */

svg.map {

    stroke: var(\--palette-color);
    stroke-width: 1px;

    path,
    polygon {
        fill: var(\--palette-color);
        stroke: none;
        stroke-linecap: round;
        stroke-miterlimit: 1;
        vector-effect: non-scaling-stroke;
    }
}

@import 'svg-custom';
