#dashboard {
  transform: scale(1.2) rotate(3deg);
}

#dashboard.nav-icon-active {
  transform: scale(2.1) rotate(21deg) translateX(9px) translateY(-3px);
  box-shadow: unset;
}

@media (width >= 1024px) {
  #dashboard {
    transform: scale(1.6) rotate(3deg) translateX(9px) translateY(-2px);
  }

  #dashboard.nav-icon-active {
    transform: scale(5.1) rotate(23deg) translateX(9px) translateY(6px);
  }
}

@media (width >= 640px) {
  transform: scale(2.1) rotate(21deg) translateX(9px) translateY(-3px);
}

.navbar .menu-me.nav-icon.nav-icon-active,
.menu-dropdown,
.menu-pinke,
.menu-me,
.menu-theme {
  background-color: unset !important;
  border: 0;
  box-shadow: unset;
}

.menu-dropdown:hover,
.menu-pinke:hover,
.menu-me:hover,
.menu-theme:hover {
  background-color: unset !important;
  border: 0;
  box-shadow: unset;
}

.menu-theme.swap.swap-rotate {
  transform: scale(1.1);
}

.menu-theme.swap.swap-rotate,
.dropdown.dropdown-end label,
.delete-rule {
  box-shadow: unset;
  border: 0;
}

.delete-rule:hover,
.dropdown.dropdown-end label:hover,
.menu-theme.swap.swap-rotate:hover {
  transform: scale(1.4);
  background-color: unset;
  box-shadow: unset;
  border: 0;
}

/* Overrides DaisyUI menu styling for the main navbar */
.navbar {
  --nav-hover-bg: color-mix(in oklab, var(--color-primary) 14%, transparent);
  --nav-active-bg: color-mix(
    in oklab,
    var(--color-primary) 24%,
    var(--color-base-100) 76%
  );
  --nav-line: color-mix(in oklab, var(--color-primary) 75%, transparent);
  --nav-text: var(--color-base-content);
}

[data-theme="dark"] .navbar {
  --nav-hover-bg: color-mix(
    in oklab,
    var(--color-primary) 18%,
    var(--color-base-200) 82%
  );
  --nav-active-bg: color-mix(
    in oklab,
    var(--color-primary) 30%,
    var(--color-base-200) 70%
  );
  --nav-line: color-mix(
    in oklab,
    var(--color-primary) 82%,
    var(--color-base-200) 18%
  );
  --nav-text: var(--color-primary-content);
}

.navbar .menu > li > a {
  position: relative;
  /*border-radius: 999px;*/
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  color: var(--nav-text);
  transition:
    color 160ms ease,
    background-color 160ms ease,
    box-shadow 200ms ease,
    transform 140ms ease;
  transform-origin: center;
}

.navbar .menu > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--nav-line);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 150ms ease,
    transform 180ms ease;
}

.navbar .menu > li > a:hover,
.navbar .menu > li > a:focus-visible {
  background-color: var(--nav-hover-bg);
  box-shadow: 0;
  transform: scale(1.34);
}

.navbar .menu > li > a.menu-active {
  background-color: var(--nav-active-bg);
  box-shadow: 0;
  /*background-color: var(--nav-active-bg);
  color: var(--color-primary-content);
  box-shadow: 0 12px 28px -20px
    color-mix(in oklab, var(--color-primary) 80%, transparent);*/

  transform: rotate(2deg);
}

.navbar .menu > li > a:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-primary) 60%, transparent);
  outline-offset: 2px;
}

.navbar .nav-icon {
  color: var(--nav-text);
  border-radius: 999px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 140ms ease;
}

.navbar .nav-icon:hover,
.navbar .nav-icon:focus-visible {
  background-color: var(--nav-hover-bg);
  color: var(--color-primary-content);
  transform: scale(1.12);
}

.navbar .nav-icon.nav-icon-active {
  background-color: var(--nav-active-bg);
  color: var(--color-primary-content);
  box-shadow: 0 8px 18px -14px
    color-mix(in oklab, var(--color-primary) 70%, transparent);
}

.navbar .nav-icon.menu-me {
  color: black;
}

[data-theme="dark"] .navbar .nav-icon.menu-me {
  color: white;
}

.navbar .nav-icon.menu-me.nav-icon-active {
  transform: scale(1.42);
}

.navbar .nav-icon.menu-me:hover {
  transform: scale(1.4);
}