.top-nav {
  .top-menu {
    height: 55px;
    border-radius: theme("borderRadius.full");
    display: flex;
    align-items: center;
    color: white;
    position: relative;
    @media screen(xl) {
      border-top-left-radius: theme("borderRadius.2xl");
      border-top-right-radius: theme("borderRadius.2xl");
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:not(.top-menu--active) {
      .top-menu__icon {
        &:before {
          content: "";
          z-index: -1;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          border-radius: theme("borderRadius.full");
          @media screen(xl) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: theme("borderRadius.2xl");
            border-top-right-radius: theme("borderRadius.2xl");
            transition-property: theme("transitionProperty.DEFAULT");
            transition-timing-function: theme("transitionTimingFunction.in");
            transition-duration: theme("transitionDuration.100");
          }
        }
      }
    }
    .top-menu__title {
      margin-left: theme("spacing.3");
      display: flex;
      align-items: center;
      white-space: nowrap;
      .top-menu__sub-icon {
        transition-property: theme("transitionProperty.DEFAULT");
        transition-timing-function: theme("transitionTimingFunction.in");
        transition-duration: theme("transitionDuration.100");
        width: theme("spacing.4");
        height: theme("spacing.4");
        display: none;
        @media screen(xl) {
          display: block;
        }
      }
    }
  }
  & > ul {
    & > li {
      /* First level */
      &:hover {
        position: relative;
        & > .top-menu {
          .top-menu__title {
            .top-menu__sub-icon {
              transform: rotate(-90deg);
            }
          }
          &:not(.top-menu--active) {
            .top-menu__icon {
              &:before {
                background: theme("colors.white"/ 5%);
              }
            }
          }
        }
        & > ul {
          display: block;
        }
      }
      & > .top-menu {
        padding-left: theme("spacing.5");
        padding-right: theme("spacing.5");
        margin-right: theme("spacing.1");
        &.top-menu--active {
          z-index: 10;
          background-color: theme("colors.slate.100");
          &:before {
            content: "";
            width: 20px;
            height: 20px;
            margin-left: -20px;
            transform: rotate(90deg) scale(1.04);
            background-size: 100%;
            background-image: theme("backgroundImage.menu-corner");
            position: absolute;
            bottom: 0;
            left: 0;
            display: none;
            @media screen(xl) {
              display: block;
            }
          }
          &:after {
            content: "";
            width: 20px;
            height: 20px;
            margin-right: -20px;
            transform: rotate(180deg) scale(1.04);
            background-size: 100%;
            background-image: theme("backgroundImage.menu-corner");
            position: absolute;
            bottom: 0;
            right: 0;
            display: none;
            @media screen(xl) {
              display: block;
            }
          }
          .top-menu__icon {
            color: theme("colors.primary");
          }
          .top-menu__title {
            color: black;
            font-weight: theme("fontWeight.medium");
          }
        }
        .top-menu__title {
          .top-menu__sub-icon {
            margin-left: theme("spacing.2");
          }
        }
      }
      & > ul {
        box-shadow: 0px 3px 20px #0000000b;
        background-color: theme("colors.primary");
        display: none;
        width: theme("spacing.56");
        position: absolute;
        border-radius: theme("borderRadius.md");
        z-index: 20;
        padding-left: 0;
        padding-right: 0;
        top: 0;
        margin-top: theme("spacing.14");
        &:before {
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: theme("colors.black" / 10%);
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: theme("borderRadius.md");
          z-index: -1;
        }
        @media screen(xl) {
          left: 100%;
          margin-left: -4px;
          margin-top: calc(theme("spacing.5") * -1);
        }
        & > li {
          /* Second level */
          padding-left: theme("spacing.5");
          padding-right: theme("spacing.5");
          position: relative;
          &:hover {
            position: relative;
            & > .top-menu {
              .top-menu__title {
                .top-menu__sub-icon {
                  transform: rotate(-90deg);
                }
              }
            }
            & > ul {
              display: block;
            }
          }
          & > .top-menu {
            .top-menu__title {
              width: 100%;
              .top-menu__sub-icon {
                margin-left: auto;
              }
            }
          }
          & > ul {
            left: 100%;
            margin-left: 0;
            box-shadow: 0px 3px 20px #0000000b;
            background-color: theme("colors.primary");
            display: none;
            width: theme("spacing.56");
            position: absolute;
            border-radius: theme("borderRadius.md");
            z-index: 20;
            padding-left: 0;
            padding-right: 0;
            top: 0;
            margin-top: 0;
            &:before {
              content: "";
              display: block;
              position: absolute;
              width: 100%;
              height: 100%;
              background-color: theme("colors.black" / 10%);
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border-radius: theme("borderRadius.md");
              z-index: -1;
            }
            & > li {
              /* Third level */
              padding-left: theme("spacing.5");
              padding-right: theme("spacing.5");
              & > .top-menu {
                .top-menu__title {
                  width: 100%;
                  .top-menu__sub-icon {
                    margin-left: auto;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.dark {
  .top-nav {
    .top-menu {
      .top-menu__title {
        color: theme("colors.slate.400");
      }
      .top-menu__icon {
        color: theme("colors.slate.400");
      }
    }
    & > ul {
      & > li {
        /* First level */
        &:hover {
          & > .top-menu {
            &:not(.top-menu--active) {
              .top-menu__icon {
                &:before {
                  background: theme("colors.darkmode.500"/ 70%);
                }
              }
            }
          }
        }
        & > .top-menu {
          &.top-menu--active {
            background-color: theme("colors.darkmode.700");
            &:before {
              background-image: theme("backgroundImage.menu-corner-dark");
            }
            &:after {
              background-image: theme("backgroundImage.menu-corner-dark");
            }
            .top-menu__icon {
              color: white;
            }
            .top-menu__title {
              color: white;
            }
          }
        }
        & > ul {
          background-color: theme("colors.darkmode.600");
          box-shadow: 0px 3px 7px #0000001c;
          & > li {
            & > ul {
              background-color: theme("colors.darkmode.600");
              box-shadow: 0px 3px 7px #0000001c;
            }
          }
        }
      }
    }
  }
}