@use 'mixins' as *;

.layout-menu {
  ul {
    li {
      a {
        &.active-route {
          font-weight: 600;
          color: var(--p-primary-800);
          border-color: var(--p-primary-800);
          // color: color-mix(in srgb, var(--primary-color) calc(100%* 1), transparent);
        }

        &:hover {
          background-color: var(--surface-hover);
        }

        &:focus {
          @include focused-inset();
        }
      }
    }
  }
}

.layout-submenu-enter-from,
.layout-submenu-leave-to {
  max-height: 0;
}

.layout-submenu-enter-to,
.layout-submenu-leave-from {
  max-height: 1000px;
}

.layout-submenu-leave-active {
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}

.layout-submenu-enter-active {
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}
