dxp-nav-main {
  /**
  * @prop --nav-padding-x: Controls padding between each navigation item.
  */
  --nav-padding-x: 1rem;

  /**
  * @prop --nav-color: Controls default text color for each navigation item.
  */
  --nav-color: hsl(0, 0%, 9.8%);
  /**
  * @prop --nav-color-hover: Controls text color for each navigation item on hover.
  */
  --nav-color-hover: hsl(229.20000000000005, 52%, 40%);
  /**
  * @prop --nav-color-active: Controls text color for each navigation item when clicked.
  */
  --nav-color-active: hsl(229.20000000000005, 52%, 40%);
  /**
  * @prop --nav-color-selected: Controls text color for the current active navigation item.
  */
  --nav-color-selected: hsl(259.5, 100%, 50%);
  /**
  * @prop ----nav-font-size: Controls font size for each navigation item.
  */
  --nav-font-size: 1.25rem;
  /**
  * @prop --nav-font-weight: Controls font weight for each navigation item.
  */
  --nav-font-weight: 800;
  /**
  * @prop --nav-line-height: Controls line height for each navigation item.
  */
  --nav-line-height: 120%;
}

.main-navigation__item {
  height: 100%;
  padding-left: var(--nav-padding-x);
  padding-right: var(--nav-padding-x);
}

.main-navigation__item:has(a[href]) {
  cursor: pointer;
}

.main-navigation__item-link-text {
  white-space: nowrap;
}

.main-navigation__item.menu-panel--visible .menu-panel {
  display: contents;
}

.main-navigation__item.menu-panel--visible .menu-panel__wrapper {
  pointer-events: visible;
}

.main-navigation__item .main-navigation__item-link {
  display: flex;
  height: 100%;
  color: var(--nav-color);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  line-height: var(--nav-line-height);
  transition: color, border 0.2s ease-in-out;
  align-items: center;
  text-decoration: none;
}

.main-navigation__item:hover .main-navigation__item-link {
  color: var(--nav-color-hover);
}

.main-navigation__item:hover .main-navigation__item-link-text {
  border-bottom: 2px solid var(--nav-color-hover);
  margin-bottom: -2px;
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
}

.main-navigation__item:active .main-navigation__item-link {
  color: var(--nav-color-active);
}

.main-navigation__item:active .main-navigation__item-link-text {
  border-bottom: 2px solid var(--nav-color-active);
  margin-bottom: -2px;
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
}

.main-navigation__item.selected .main-navigation__item-link {
  color: var(--nav-color-selected);
}

.main-navigation__item.menu-panel--visible .main-navigation__item-link {
  color: var(--nav-color-selected);
}

.main-navigation__item.selected .main-navigation__item-link-text {
  border-bottom: 2px solid var(--nav-color-selected);
  margin-bottom: -2px;
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
}

.main-navigation__item.menu-panel--visible .main-navigation__item-link-text {
  border-bottom: 2px solid var(--nav-color-selected);
  margin-bottom: -2px;
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
}

.sr-only {
  position: absolute;
  left: -10000px;
  overflow: hidden;
}