/* licenced under EUPL, https://eupl.eu/1.2/nl/*/

[data-theme="light"] {
    --bg-color-theme-switch: var(--default-blue-primary-tint-2);
    --icon-color-theme-switch: var(--default-blue-primary);
}

[data-theme="dark"] {
    --bg-color-theme-switch: var(--default-blue-primary);
    --icon-color-theme-switch: var(--default-blue-primary-tint-3);
}

/*sidebar*/
#sidebar {
    position: absolute;
    width: 45px;
    height: -webkit-fill-available; /*height minus topbar*/
    min-height: 95%;
    background-color: var(--bg-color-theme-switch);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    transition: ease-in-out 0.5s;
    /*temporary! places above modal overlay*/
    z-index: 2000;

  ul.sidebar-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

   & .top {
        margin-top: 30px;
    }

    & .bottom {
        margin-bottom: 30px;
    }

    > .sidebar-item {
        cursor: pointer;
    }

}

/*sidebar icon style and hover*/
#sidebar .sidebar-button li {
    :is(button) {
        background: transparent;
        border: none;
        padding: 0;
    }

    :is(svg) {
        width: 25px;
        height: 25px;
        cursor: pointer;
        fill: var(--icon-color-theme-switch);
    }
}

.sidebar.hover-wrapper {
    display: flex;
    justify-content: flex-end; /*align top of btn with top of popout*/
    background: transparent; /*override map.hover-wrapper styles*/
    box-shadow: none; /*override map.hover-wrapper styles*/
}


.submenu-container {
    display: flex;
    flex-direction: column;
    /*border-left: 2px solid var(--default-blue-primary);*/
    margin-top: -8px; /*align h3 w/ button*/
    position: absolute;
    background-color: white;
    box-shadow: -1px 1px 6px var(--color-shadow);
    left: 45px;
    transition: all ease-in-out 0.5s;
    width: 220px; /*temporary fix!*/
    resize: horizontal;


    > h3.title {
        position: relative;
        font-size: 14px;
        font-weight: 700;
        /*border-left: 4px solid var(--default-blue-primary);*/
        /*border-right: 4px solid var(--default-blue-primary-tint-2);*/
        width: 173px; /*temporary fix! -20px for padding in container*/
        height: 20px; /*temporary*/
        padding: 10px 10px 10px 15px;
        margin: unset;
        cursor: default;
    }

    > h3.title:before {
        content: "";
        position: absolute;
        top: 38%;
        left: 0;
        border-left: 7px solid var(--default-blue-primary);
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

    /*> h3:after {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    top: 38%;*/
    /*    right: 0;*/
    /*    border-right: 5px solid var(--default-blue-primary);*/
    /*    border-top: 5px solid transparent;*/
    /*    border-bottom: 5px solid transparent;*/
    /*}*/

}

/*submenu styles*/
ul.submenu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
    /*border-left: 4px solid var(--default-blue-primary);*/
    /*animation: fadeIn 0.5s;*/

    > li.item {
        padding-left: 15px;
        list-style: none;
        align-items: unset;
        justify-content: unset;
    }
}

/*sidebar subMenu fadeInOut animation keyframes*/
/*fadeOut not working*/
/*@keyframes fadeIn {*/
/*    from {*/
/*        opacity: 0;*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/* @keyframes fadeOut {
from {
    opacity: 1;
}
to {
    opacity: 0;
}

} */


/*sidebar icon hover animation keyframes*/
@keyframes shake {
    0%, 30%, 50%, 70%, 100% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
}