.side-nav {
  &.side-nav--simple {
    .side-menu {
      .side-menu__title {
        @apply hidden;
        .side-menu__sub-icon {
          @apply hidden;
        }
      }
    }
  }
  .side-nav__divider {
    width: 100%;
    height: 1px;
    background-color: theme("colors.white" / 8%);
    z-index: 10;
    position: relative;
  }
  .side-menu {
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: theme("spacing.5");
    color: white;
    margin-bottom: theme("spacing.1");
    position: relative;
    border-radius: theme("borderRadius.full");
    .side-menu__title {
      display: none;
      align-items: center;
      width: 100%;
      margin-left: theme("spacing.3");
      @media screen(xl) {
        display: flex;
      }
      .side-menu__sub-icon {
        transition-property: theme("transitionProperty.DEFAULT");
        transition-timing-function: theme("transitionTimingFunction.in");
        transition-duration: theme("transitionDuration.100");
        margin-left: auto;
        margin-right: theme("spacing.5");
        display: none;
        @media screen(xl) {
          display: block;
        }
        svg {
          width: theme("spacing.4");
          height: theme("spacing.4");
        }
      }
    }
  }
  & > ul {
    & > li {
      /* First level */
      & > .side-menu {
        &.side-menu--active {
          z-index: 10;
          background-color: theme("colors.slate.100");
          &:before {
            content: "";
            width: 30px;
            height: 30px;
            margin-top: -30px;
            transform: rotate(90deg) scale(1.04);
            background-size: 100%;
            background-image: theme("backgroundImage.menu-corner");
            position: absolute;
            top: 0;
            right: 0;
            margin-right: calc(theme("spacing.5") * -1);
          }
          &:after {
            content: "";
            width: 30px;
            height: 30px;
            margin-top: 50px;
            transform: scale(1.04);
            background-size: 100%;
            background-image: theme("backgroundImage.menu-corner");
            position: absolute;
            top: 0;
            right: 0;
            margin-right: calc(theme("spacing.5") * -1);
          }
          .side-menu__icon {
            color: theme("colors.primary");
            &:before {
              content: "";
              z-index: -1;
              position: absolute;
              top: 0;
              right: 0;
              margin-right: calc(theme("spacing.5") * -1);
              width: theme("spacing.12");
              height: 100%;
              background: theme("colors.slate.100");
            }
          }
          .side-menu__title {
            color: theme("colors.slate.700");
            font-weight: theme("fontWeight.medium");
          }
        }
        &:not(.side-menu--active) {
          &:not(.side-menu--open) {
            .side-menu__icon:before {
              content: "";
              z-index: -1;
              width: 230px;
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              border-top-left-radius: theme("borderRadius.full");
              border-bottom-left-radius: theme("borderRadius.full");
              transition-property: theme("transitionProperty.DEFAULT");
              transition-timing-function: theme("transitionTimingFunction.in");
              transition-duration: theme("transitionDuration.100");
            }
          }
        }
        &:hover {
          &:not(.side-menu--active):not(.side-menu--open) {
            .side-menu__icon:before {
              background-color: theme("colors.white" / 5%);
            }
          }
        }
      }
      & > ul {
        padding: theme("spacing[1.5]") 0;
        background-color: theme("colors.black" / 10%);
        border-radius: theme("borderRadius.lg");
        &.side-menu__sub-open {
          margin-bottom: theme("spacing.1");
        }
        & > li {
          /* Second level */
          & > .side-menu {
            height: 48px;
            &.side-menu--active {
              .side-menu__title {
                font-weight: theme("fontWeight.medium");
              }
            }
            &:not(.side-menu--active) {
              color: theme("colors.white" / 70%);
            }
            &:hover {
            }
            .side-menu__icon {
            }
          }
          & > ul {
            padding: theme("spacing[1.5]") 0;
            background-color: theme("colors.black" / 10%);
            border-radius: theme("borderRadius.lg");
            &.side-menu__sub-open {
              margin-bottom: theme("spacing.1");
            }
            & > li {
              /* Third level */
              & > .side-menu {
                height: 48px;
                &.side-menu--active {
                  .side-menu__title {
                    font-weight: theme("fontWeight.medium");
                  }
                }
                &:not(.side-menu--active) {
                  color: theme("colors.white" / 70%);
                }
                &:hover {
                }
                .side-menu__icon {
                }
              }
            }
          }
        }
      }
    }
  }
}

.dark {
  .side-nav {
    .side-nav__divider {
      background-color: theme("colors.white" / 7%);
    }
    & > ul {
      & > li {
        /* First level */
        & > .side-menu {
          &.side-menu--active {
            background-color: theme("colors.darkmode.700");
            &:before {
              background-image: theme("backgroundImage.menu-corner-dark");
            }
            &:after {
              background-image: theme("backgroundImage.menu-corner-dark");
            }
            .side-menu__icon {
              color: theme("colors.slate.300");
              &:before {
                background: theme("colors.darkmode.700");
              }
            }
            .side-menu__title {
              color: theme("colors.slate.300");
            }
          }
          &:not(.side-menu--active) {
            .side-menu__icon {
              color: theme("colors.slate.400");
            }
            .side-menu__title {
              color: theme("colors.slate.400");
            }
          }
          &:hover {
            &:not(.side-menu--active):not(.side-menu--open) {
              .side-menu__icon:before {
                background-color: theme("colors.darkmode.500" / 70%);
              }
            }
          }
        }
        & > ul {
          background-color: theme("colors.darkmode.900" / 30%);
          & > li {
            /* Second level */
            & > .side-menu {
              &.side-menu--active {
                color: theme("colors.slate.300");
              }
              &:not(.side-menu--active) {
                color: theme("colors.slate.400");
              }
              &:hover {
              }
              .side-menu__icon {
              }
            }
            & > ul {
              background-color: theme("colors.darkmode.900" / 30%);
              & > li {
                /* Third level */
                & > .side-menu {
                  &.side-menu--active {
                    color: theme("colors.slate.300");
                  }
                  &:not(.side-menu--active) {
                    color: theme("colors.slate.400");
                  }
                  &:hover {
                  }
                  .side-menu__icon {
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}