/*
    Credits To simontheonlyone
    Link : https://uiverse.io/simontheonlyone/happy-baboon-60
*/

.file_explorer_button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.3em;
    height: 5.3em;
    border: none;
    border-radius: .4em;
    background: transparent;
}

.file_explorer_container {
    position: absolute;
    width: 3.5em;
    height: 3.1em;
    background: none;
    overflow: hidden;
}

.file_explorer_folder {
    content: '';
    position: absolute;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, .3); */
}

.file_explorer_folder_one {
    bottom: 0;
    width: 100%;
    height: 88%;
    border-radius: 3px;
    border-top: 2px solid rgb(206, 167, 39);
    /* background-color: rgb(252, 212, 80); */
    background: linear-gradient(
        -35deg,
        rgb(238, 194, 47) 5%,
        rgb(255, 223, 118)
    );
}

.file_explorer_folder_two {
    top: 5%;
    width: 38%;
    height: 19%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: rgb(206, 167, 39);
    box-shadow: 0 1px 5px -2px rgba(0, 0, 0, .5);
}

.file_explorer_folder_two::before {
    content: '';
    position: absolute;
    display: inline;
    left: 88%;
    width: 0;
    height: 0;
    border-left: 7px solid rgb(206, 167, 39);
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    /* background-color: rgb(206, 167, 39); */
}

.file_explorer_folder_three {
    display: flex;
    align-items: center;
    justify-content: center;
    left: .5em;
    bottom: 0;
    width: 2.5em;
    height: .9em;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(
        -35deg,
        rgb(25, 102, 218),
        rgb(109, 165, 249)
    );
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}

.file_explorer_folder_four {
    left: 1em;
    bottom: .3em;
    width: 1.5em;
    height: .18em;
    border-radius: 1em;
    background-color: rgb(20, 77, 163);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.file_explorer_active_line {
    content: '';
    position: absolute;
    bottom: 0;
    width: .9em;
    height: .4em;
    background-color: #999;
    border: none;
    border-radius: 1em;
    transition: all .15s linear;
}

.file_explorer_button:active .file_explorer_active_line,
.file_explorer_button:focus .file_explorer_active_line {
    width: 2.3em;
    background-color: rgb(41, 126, 255);
}

.file_explorer_button:focus .container {
    animation: wow 1s forwards;
}

@keyframes wow {
    20% {
        scale: .8;
    }

    30% {
        scale: 1;
        transform: translateY(0);
    }

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

    65% {
        transform: translateY(4px);
    }

    80% {
        transform: translateY(0);
    }

    100% {
        scale: 1;
    }
}

.file_explorer_text {
    content: '';
    position: absolute;
    top: -2.6em;
    width: 7.7em;
    height: 2.6em;
    background-color: #666;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    text-shadow: 0 0 10px rgb(0, 0, 0);
    opacity: 0;
    transition: all .25s linear;
}

.file_explorer_button:hover .file_explorer_text {
    opacity: 1;
}