@hashicorp/react-subnav/partials/MenuItemsOverflow/style.module.css

Displays a navigation bar, with links and a call-to-action.

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

/* Note: consumes from theme.module.css, as marked */

.root {
  position: relative;
  margin-left: auto;
}

.dropdown {
  background: var(--dropdown-background-color); /* from theme.module.css */
  border-radius: 4px;
  box-shadow: var(--dropdown-box-shadow); /* from theme.module.css */
  margin-top: 8px;
  max-height: calc(100vh - 300%);
  overflow-y: auto;
  padding: 12px 24px 0 24px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 256px;
  z-index: 1;

  &.isCollapsed {
    display: none;
  }
}

.ulElem {
  padding: 0;
  margin: 0;
  list-style: none;
}

.submenuTitle {
  composes: g-type-label from global;
  margin: 12px 0 8px 0;
  color: var(--menu-item-heading-text-color); /* from theme.module.css */
}

.divider {
  margin: 12px 0;
  border: 0;
  padding: 0;
  height: 1px;
  background: var(--border-color); /* from theme.module.css */
}

.submenuItem {
  composes: g-type-body-small-strong from global;
  display: block;
  padding: 4px 0;
  line-height: 1.6em;
  color: var(--menu-item-text-color); /* from theme.module.css */

  &:hover {
    text-decoration: underline;
  }
}