vuestic-ui/dist/esm-node/VaMenuItem.css

Vue 3 UI Framework

.va-menu-item {
  display: table-row;
  cursor: pointer;
  position: relative;
  z-index: 0;
}
.va-menu-item::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--va-menu-item-hover-color);
  opacity: 0;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.va-menu-item__cell {
  display: table-cell;
  vertical-align: middle;
}
.va-menu-item__cell--center {
  padding: 0 var(--va-menu-padding-x);
  text-align: left;
  width: 100%;
}
.va-menu-item__cell--left, .va-menu-item__cell--right {
  padding: 0 var(--va-menu-padding-x);
  text-align: center;
  min-width: 1px;
  white-space: nowrap;
}
.va-menu-item__cell--left:empty, .va-menu-item__cell--right:empty {
  padding: 0;
}
.va-menu-item__cell--left {
  padding-right: 0;
}
.va-menu-item__cell--right {
  padding-left: 0;
}
.va-menu-item:hover::after {
  background: var(--va-menu-item-hover-color);
  opacity: var(--va-menu-item-hover-opacity);
}
.va-menu-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.va-menu-item--keyboard-focus {
  outline: 2px solid var(--va-focus) !important;
  border-radius: 2px;
}