$app-bar-bg: rgba(0, 0, 0, 0.863);
$drag-height: 35px;
$secondary-color: #00aced;
$app-hover-indicator-color: white;
//  vibrancy value
// $app-bar-bg: rgba(0, 0, 0, 0.521);
$drag-indicator-color: rgba(255, 255, 255, 0.192);
// vibrancy value
// $empty-app-border-color: rgba(255, 255, 255, 0.17);
$empty-app-border-color: rgba(255, 255, 255, 0.089);

$tooltip-bg: rgb(44, 44, 44);
$tooltip-fg: rgba(255, 255, 255, 0.822);
$tooltip-shadow-color1: rgba(0, 0, 0, 0.12);
$tooltip-shadow-color2: rgba(0, 0, 0, 0.24);


* {
    -webkit-user-select: none;
}

html {
    padding: 0;
    margin: 0;
    outline: 0;
    background: transparent;
}

body {
    display: flex;
    height: 100vh;
    overflow: hidden;
    font: caption;
    background: transparent !important;
}

#appbar {
    border-radius: 5px;
    position: relative;
    margin: auto;
    width: 75px;
    height: 92.2%;
    // background: $app-bar-bg;
    background: transparent !important;
    overflow: hidden;
    padding-top: $drag-height;
    padding-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .1);

    .track {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 100%;
        width: 96%;
        margin: 0 2%;

        .app.empty {
            border: dashed 2px $empty-app-border-color;
        }

        .app.empty::before {
            content: '+';
            font-size: 40px;
            position: absolute;
            left: 17px;
            top: 5px;
            transform: scale(.9);
            color: $empty-app-border-color;
        }



        .app {
            position: relative;
            width: 56px !important;
            height: 56px !important;
            display: table;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 2vh;
            border-radius: 5px;
            display: flex;
            border: dashed 2px transparent;
            // overflow: hidden;

            & * {
                margin: auto;
            }

            .icon {
                width: 32px;
                height: 32px;
                z-index: 0;
                border-radius: 5px;
                // transition: all .3s ease-in-out;
            }

            input[type=file] {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                z-index: 10;
            }


        }

        .app:hover {
            color: $secondary-color;



            .icon {
                // transform: rotateZ(5deg) scale(.95);
                filter: hue-rotate(0deg) saturate(2) invert(0);
            }
        }

        .app:hover::after {
            content: '';
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: $app-hover-indicator-color;
            position: absolute;
            bottom: 30%;
            right: 10%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            z-index: 100;
        }

        .app.empty:hover::after {
            display: none;
        }

        .app.active::before {
            content: '';
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: $secondary-color;
            position: absolute;
            bottom: 30%;
            right: 10%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            z-index: 100;
        }

        .app.empty:hover::before {
            color: $secondary-color;
        }
    }
}

#drag {
    width: 100%;
    position: absolute;
    height: $drag-height;
    background: transparent;
    top: 0;
    left: 0;
    -webkit-app-region: drag;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999 !important;

    .circle {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: $drag-indicator-color;
        cursor: move;
    }

    .bar {
        width: 30px;
        height: 8px;
        border-radius: 10px;
        margin-left: 5px;
        background: $drag-indicator-color;
        cursor: move;
    }

    .circle:nth-child(2) {
        margin-left: 5px;
        margin-right: 5px;
    }
}


::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    // background-color: transparent !important;
}

::-webkit-scrollbar {
    width: 7px;
    background-color: transparent !important;
    display: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgb(99, 99, 99);
}

.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {

    0%,
    100% {
        -webkit-transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-5px);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.fadeIn {
    animation-name: fadeIn;
    animation-timing-function: ease-out;
    animation-duration: .3s;
}

.fadeOut {
    animation-name: fadeOut;
    animation-duration: .3s;
    animation-fill-mode: forwards;
}






.settings-page {
    font: caption;
    background: rgb(37, 37, 37) !important;
    color: #999;
    position: relative;
    overflow-y: scroll !important;

    h2 {
        color: #999;
    }

    .board {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: row;
        overflow-x: hidden;
        overflow-y: scroll !important;
        font: caption;


        .lside {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;

            div {
                margin: 30px auto;
                text-align: center;

                img {
                    width: 60px;
                    height: 60px;
                }

                p {
                    margin: 5px 0 0 0;
                    color: #999;
                    font-size: 14px;
                    letter-spacing: 1px;
                }
            }
        }

        .rside {
            width: 70%;
            height: 100%;
            padding-top: 30px;

            h2 {
                font: caption;
                font-weight: bold;
                font-size: 30px;
                margin: 0 0 15px 0;
                color: rgba(0, 0, 0, 0.712);
            }

            .label {
                font-size: 14px;
                margin-bottom: 2px;
                display: block;

            }

            .form-control {
                margin-top: 13px;

                select {
                    border-radius: 5px;
                    padding: 3px 5px;
                    border: 2px solid #00aced;
                    outline: none;
                    font: caption;
                    color: #999;
                    background: transparent;

                    & option {
                        background: #222;
                        color: #999;
                    }
                }
            }

            .switch {
                transform: scale(.7) translateX(-15px);
            }

            .btn {
                display: block;
                width: 20%;
                margin-top: 10px;
                padding: 10px 0;
                font-weight: bold;
                border-radius: 5px;
                background: #222;
                color: white;
                border: 3px solid #111;
                outline: none;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
                position: absolute;
                right: 30px;
                bottom: 30px;
                transform: scale(.9);
            }

            .btn:hover {
                background: #2196F3;
            }


        }
    }



    .window-maximize,
    .window-minimize {
        display: none;
    }


}


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.toast-left {
    left: 20px;
    position: absolute;
    width: 80px !important;
    font: caption;
    box-shadow: none !important;
    color: #999;
}

.intro-page {
    display: flex;

    .slide.mac {
        margin: auto;
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }

    .slide {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: 5px;
        width: 95vw;
        height: 95vh;
        display: flex;
        background: rgb(213, 236, 255);
        margin: auto;

        .pane {
            margin: auto;
            font: caption;
            text-align: center;
            max-width: 75vh;
            position: relative;
            z-index: 1;


            img {
                width: auto;
                height: 130px;
            }

            h2 {
                color: #333;
                font-size: 25px;
                margin-bottom: 10px;
            }

            p {
                margin-top: 0px;
                font-size: 13px;
                color: #000;
                font-weight: 400;
                text-align: center;
            }

            .nav {
                padding-top: 5px;
                display: table;
                margin: 0 auto;
                transform: scale(.85);

                button {
                    background: rgb(213, 236, 255);
                    border: 3px solid #00aced;
                    border-radius: 5px;
                    padding: 10px 25px;
                    outline: none;
                    font-weight: bold;
                    font-size: 14px;
                    transition: ease all .2s;
                    margin: 0 3px;
                }

                button:hover {
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
                    border-color: transparent;
                    background: rgb(78, 78, 78);
                    color: white;
                }

                button.close {
                    background: #00aced;
                    color: white;
                }
            }
        }
    }
}

span.key {
    background: #eee;
    border: 1px solid #999;
    color: #222;
    padding: 0px 5px;
    border-radius: 5px;
    font-weight: bold;
    line-height: 25px;
}



//  particle effect 

.particle {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
}

@for $i from 1 through 30 {
    @keyframes particle-animation-#{$i} {
        100% {
            transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
        }
    }

    .particle:nth-child(#{$i}) {
        animation: particle-animation-#{$i} 60s infinite;
        $size: random(5) + 5 + px;
        opacity: random(100)/100;
        height: $size;
        width: $size;
        animation-delay: -$i * .2s;
        transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
        background: hsl(random(360), 70%, 50%);
    }
}

.tooltiptext {
    visibility: hidden;
    opacity: 0;
    max-width: 50px !important;
    min-width: 40px !important;
    background-color: $tooltip-bg;
    color: $tooltip-fg;
    text-align: center;
    border-radius: 3px;
    padding: 5px;
    z-index: 1 !important;
    font: caption;
    font-size: 13px;
    // transition: opacity .3s;
    text-align: center;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px $tooltip-shadow-color1, 0 1px 2px $tooltip-shadow-color2;
    pointer-events: none;
}


.tooltiptext p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 100%;
    padding: 0;
    margin: 0;
}

.tooltiptext::first-letter {
    text-transform: capitalize;
}

.tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%;
    /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: $tooltip-bg transparent transparent transparent;
}

.tooltiptext.top::after {
    content: " ";
    position: absolute;
    top: initial;
    bottom: 100%;
    /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent $tooltip-bg transparent;
}


.tooltiptext.show {
    animation-name: tooltip;
    animation-delay: .7s;
    animation-duration: .3s;
    animation-fill-mode: forwards;
}

@keyframes tooltip {
    0% {
        visibility: hidden;
        opacity: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}

.tooltiptext.tether-out-of-bounds-top,
.tooltiptext.tether-out-of-bounds-bottom {
    display: none;
}

// adds specific styling..
.mac-style
{
    background: transparent !important;

    .tooltip.empty {
        transform: scale(.8);
        font-weight: lighter !important;
        border-color: rgba(255, 255, 255, .4) !important;
    }

    .app.empty::before {
        top: 2px !important;
        color: rgba(255, 255, 255, .4) !important;
    }
    .app.empty:hover::before {
        top: 2px !important;
        color: #00aced !important;
    }

    .app .icon {
        width: 48px !important;
        height: 48px !important;
    }

   
}