@layer components {
    .side-nav {
        width: 250px;
        @apply text-theme-33 dark:text-gray-500 px-5 pt-8 pb-16 overflow-x-hidden;
        @include media-breakpoint-down(xl) {
            width: 105px;
        }
        @include media-breakpoint-down(md) {
            @apply hidden;
        }
        &.side-nav--simple {
            width: 105px;
            .side-menu {
                .side-menu__title {
                    @apply hidden;
                    .side-menu__sub-icon {
                        @apply hidden;
                    }
                }
                &:not(.side-menu--active) .side-menu__icon:before {
                    @apply hidden;
                }
            }
        }
        .side-nav__devider {
            @apply w-full h-px bg-theme-16 z-10 relative dark:bg-dark-3;
        }
        .side-menu {
            height: 50px;
            @apply flex items-center pl-5 mb-1 relative rounded-lg;
            .side-menu__title {
                @apply w-full ml-3 flex items-center;
                .side-menu__sub-icon {
                    @apply transition ease-in duration-100 ml-auto mr-5;
                    svg {
                        @apply w-4 h-4;
                    }
                    @include media-breakpoint-down(xl) {
                        @apply hidden;
                    }
                }
                @include media-breakpoint-down(xl) {
                    @apply hidden;
                }
            }
        }
        > ul {
            @for $i from 1 through 50 {
                > li:nth-child(#{$i}) {
                    &.side-nav__devider {
                        @apply opacity-0;
                        animation: 0.4s
                            intro-devider-animation
                            ease-in-out
                            0.33333s;
                        animation-fill-mode: forwards;
                        animation-delay: #{$i * 0.1}s;
                    }
                    & > a {
                        &:not(.side-menu--active) {
                            @apply opacity-0;
                            transform: translateX(50px);
                            animation: 0.4s
                                intro-menu-animation
                                ease-in-out
                                0.33333s;
                            animation-fill-mode: forwards;
                            animation-delay: #{$i * 0.1}s;
                        }
                        &.side-menu--active {
                            animation: 0.4s
                                intro-active-menu-animation
                                ease-in-out
                                0.33333s;
                            animation-fill-mode: forwards;
                        }
                    }
                }
            }
            ul {
                @for $i from 1 through 50 {
                    li:nth-child(#{$i}) {
                        & > a {
                            @apply opacity-0;
                            transform: translateX(50px);
                            animation: 0.2s
                                intro-submenu-animation
                                ease-in-out
                                0.33333s;
                            animation-fill-mode: forwards;
                            animation-delay: #{$i * 0.1}s;
                        }
                    }
                }
                @apply hidden bg-theme-20 rounded-lg dark:bg-dark-4;
                &.side-menu__sub-open {
                    @apply block;
                }
                .side-menu__icon:before {
                    @apply hidden;
                }
                li a {
                    &.side-menu--active {
                        .side-menu__icon {
                            @apply text-theme-19;
                        }
                        .side-menu__title {
                            @apply text-theme-19 font-medium;
                        }
                    }
                }
                ul {
                    @apply hidden bg-theme-18 rounded-lg dark:bg-dark-7;
                }
            }
            & > li {
                & > .side-menu {
                    &.side-menu--active {
                        border-bottom-width: 3px;
                        @apply bg-theme-17 border-solid border-theme-34 dark:bg-dark-1 dark:border-dark-2 dark:text-white;
                        &:before {
                            content: "";
                            width: 20px;
                            height: 80px;
                            margin-right: -47px;
                            animation: 0.3s active-side-menu-chevron-animation
                                ease-in-out 0.33333s;
                            animation-fill-mode: forwards;
                            animation-delay: 1s;
                            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
                            @apply bg-no-repeat bg-cover absolute top-0 bottom-0 right-0 my-auto opacity-0;
                        }
                        .side-menu__icon {
                            @apply text-theme-19;
                        }
                        .side-menu__title {
                            @apply text-theme-19 font-medium;
                        }
                    }
                    &:hover:not(.side-menu--active):not(.side-menu--open) {
                        @apply bg-theme-20 dark:bg-dark-4;
                    }
                }
            }
        }
    }

    @keyframes intro-devider-animation {
        100% {
            @apply opacity-100;
        }
    }

    @keyframes intro-menu-animation {
        100% {
            @apply opacity-100;
            transform: translateX(0px);
        }
    }

    @keyframes intro-submenu-animation {
        100% {
            @apply opacity-100;
            transform: translateX(0px);
        }
    }

    @keyframes intro-active-menu-animation {
        100% {
            @apply z-10;
        }
    }

    @keyframes active-side-menu-chevron-animation {
        100% {
            margin-right: -27px;
            @apply opacity-100;
        }
    }

    .dark {
        .side-nav {
            > ul {
                & > li {
                    & > .side-menu {
                        &.side-menu--active {
                            &:before {
                                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23293145'/%3E%3C/svg%3E");
                            }
                        }
                    }
                }
            }
        }
    }
}
