[data-theme="light"] {
    --color-skill-hover-bg: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] {
    --color-skill-hover-bg: rgba(255, 255, 255, 0.05);
}

#skillsContainer {
    position: relative;
    user-select: none;
    width: 80vw;
    max-width: 1600px;
    min-width: 200px;
    height: 80vh;
    min-height: 200px;
    overflow: hidden;
    padding: 0 10px;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 10px;

    --transition-skills: all 2000ms cubic-bezier(0.52, 1.64, 0.37, 0.66) 0ms;

    transition: var(--transition-skills);

    --bar-skew: 15px; /* dynamic per js */
    --bar-label-font-size: 12px;

    & .barContainer {
        position: relative;
        flex: 1;
        max-width: 100px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        --val-percent: 65;
        --color-hue-bar: 200;
        --color-sat-bar: 100%;

        --bar-mirror-height: 40px;

        & .bar {
            position: relative;
            flex: 9;
            margin-top: calc(var(--bar-skew) * 2);


            & > div {
                transition: var(--transition-skills);
            }

            & .barTop {
                position: absolute;
                width: 100%;
                height: calc(var(--bar-skew) * 2);
                left: 0;
                bottom: calc(var(--val-percent) * 1%);
                background: linear-gradient(30deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 50%, 1) 20%, hsla(var(--color-hue-bar), var(--color-sat-bar), 90%, 1) 100%);
                clip-path: polygon(50% 0, 100% var(--bar-skew), 50% 100%, 0 var(--bar-skew));
                z-index: 1;
            }

            & .barLeft {
                position: absolute;
                width: 50%;
                height: calc(var(--val-percent) * 1% + var(--bar-skew));
                left: 0;
                bottom: 0;
                background: linear-gradient(160deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 60%, 1) 20%, hsla(var(--color-hue-bar), var(--color-sat-bar), 80%, 1) 40%, hsla(var(--color-hue-bar), var(--color-sat-bar), 50%, 1) 100%);
                clip-path: polygon(0 0, 100% var(--bar-skew), 100% 100%, 0% calc(100% - var(--bar-skew)));
            }

            & .barRight {
                position: absolute;
                width: 50%;
                height: calc(var(--val-percent) * 1% + var(--bar-skew));
                right: 0;
                bottom: 0;
                background: linear-gradient(160deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 40%, 1) 0, hsla(var(--color-hue-bar), var(--color-sat-bar), 30%, 1) 100%);
                clip-path: polygon(0 var(--bar-skew), 100% 0, 100% calc(100% - var(--bar-skew)), 0 100%);
            }

            & .barLabel {
                position: absolute;
                white-space: nowrap;
                font-weight: 1;
                z-index: 1;

                transform: rotateZ(-90deg);
                transform-origin: 0 0;
                font-size: var(--bar-label-font-size);
                line-height: var(--bar-label-font-size);
                height: var(--bar-label-font-size);

                bottom: -5px;
                left: 50%;

                &.aboveBar {
                    bottom: calc(var(--val-percent) * 1% + var(--bar-skew) * 1);
                }

                &:not(.aboveBar) {
                    color: var(--color-headline-on-gradient);
                }

                & img {
                    display: inline-block;
                    height: calc(var(--bar-label-font-size) * 1.0);
                    background: white;
                    border-radius: 20%;
                    padding: 2px;
                    margin-left: 4px;
                }
            }
        }

        & .barMirror {
            height: var(--bar-mirror-height);
            overflow: visible;

            & > div {
                position: absolute;
                width: 50%;
                height: calc(var(--bar-mirror-height) + var(--bar-skew));
                bottom: 0;

                transition: var(--transition-skills);
            }

            & .barMirrorLeft {
                left: 0;
                background: linear-gradient(200deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 60%, 0.8) 0, hsla(var(--color-hue-bar), var(--color-sat-bar), 60%, 0) 70%);
                clip-path: polygon(0 0, 100% var(--bar-skew), 100% 100%, 0% calc(100% - var(--bar-skew)));
            }

            & .barMirrorRight {
                right: 0;
                background: linear-gradient(160deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 30%, 0.8) 0, hsla(var(--color-hue-bar), var(--color-sat-bar), 30%, 0) 70%);
                clip-path: polygon(0 var(--bar-skew), 100% 0, 100% calc(100% - var(--bar-skew)), 0 100%);
            }
        }

        &:hover {
            background-color: var(--color-skill-hover-bg);

            & .bar {

                & .barTop {
                    background: linear-gradient(30deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 70%, 1) 20%, hsla(var(--color-hue-bar), var(--color-sat-bar), 90%, 1) 100%);
                }

                & .barLeft {
                    background: linear-gradient(160deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 80%, 1) 20%, hsla(var(--color-hue-bar), var(--color-sat-bar), 90%, 1) 40%, hsla(var(--color-hue-bar), var(--color-sat-bar), 60%, 1) 100%);
                }

                & .barRight {
                    background: linear-gradient(160deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 50%, 1) 0, hsla(var(--color-hue-bar), var(--color-sat-bar), 30%, 1) 100%);
                }
            }

            & .barMirror {
                & .barMirrorLeft {
                    background: linear-gradient(200deg, hsla(var(--color-hue-bar), var(--color-sat-bar), 70%, 0.8) 0, hsla(var(--color-hue-bar), var(--color-sat-bar), 70%, 0) 70%);
                }
            }
        }
    }
}

dialog.opening {
    #skillsContainer {
        & .barContainer {
            & .bar {
                & .barTop {
                    bottom: 0;
                }

                & .barLeft {
                    height: 0;
                }

                & .barRight {
                    height: 0;
                }

                & .barLabel {

                    &.aboveBar {
                        bottom: 5px;
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 650px) {
    #skillsContainer {
        width: 90vw;
        gap: 2px;
    }
}