@vuecs/navigation/dist/style.css

A package for multi level navigations.

.vc-nav-items, .vc-nav-sub-level-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vc-nav-link {
  cursor: pointer;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  display: flex;
}

.vc-nav-separator {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.vc-nav-separator:before, .vc-nav-separator:after {
  content: "";
  opacity: .3;
  background: currentColor;
  flex: auto;
  height: 1px;
}

.vc-nav-item-nested:not(.active) > .vc-nav-items {
  display: none;
}

.vc-nav-trigger {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: .5rem;
  margin: 0;
  text-decoration: none;
  display: flex;
}

.vc-nav-content {
  display: block;
}

.vc-nav-viewport {
  display: block;
  position: relative;
}

[data-reka-navigation-menu] .vc-nav-items {
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

[data-reka-navigation-menu] .vc-nav-item {
  position: relative;
}

[data-reka-navigation-menu] .vc-nav-content {
  z-index: 50;
  background: var(--vc-color-bg, #fff);
  border: 1px solid var(--vc-color-border, #0000001a);
  border-radius: var(--vc-radius-md, .375rem);
  min-width: max-content;
  margin-top: .25rem;
  padding: .25rem;
  position: absolute;
  top: 100%;
  left: 0;
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}

[data-reka-navigation-menu] .vc-nav-content .vc-nav-items {
  flex-flow: column;
  align-items: stretch;
}

.vc-nav-items.vc-nav-items--pills {
  flex-flow: wrap;
  gap: .25rem;
  display: flex;
}

.vc-nav-items.vc-nav-items--pills.vc-nav-items--vertical {
  flex-flow: column;
}

.vc-nav-item--pills {
  display: flex;
}

.vc-nav-link--pills {
  border-radius: .375rem;
  width: 100%;
  padding: .375rem .75rem;
}

.vc-nav-link--pills:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.vc-nav-link--pills.active {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.vc-stepper {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.vc-stepper[data-orientation="vertical"] {
  flex-direction: column;
  align-items: stretch;
}

.vc-stepper-item {
  flex: auto;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.vc-stepper-trigger {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

.vc-stepper-trigger[disabled], .vc-stepper-trigger[data-disabled] {
  cursor: not-allowed;
  opacity: .6;
}

.vc-stepper-indicator {
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.vc-stepper-separator {
  flex: auto;
  height: 1px;
}

.vc-stepper[data-orientation="vertical"] .vc-stepper-separator {
  width: 1px;
  height: 2rem;
}

.vc-stepper-indicator-sm {
  width: 1.5rem;
  height: 1.5rem;
  font-size: .75rem;
}

.vc-stepper-indicator-lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}