@harvest-profit/npk/dist/Menu/Menu.module.css

NPK UI Design System

.Overlay {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  min-width: var(--menu-min-width, 200px);
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--menu-bg-color);
  color: var(--menu-fg-color);
  font-weight: normal;
  padding: var(--size-6) var(--size-6);
  border-radius: var(--control-radius);
  font-size: var(--size-13);
  box-shadow: var(--shadow-floating-small);

  --btn-font-weight: normal;
}
.Overlay[data-component="submenu"] {
    min-width: 150px;
    min-width: var(--menu-menu-min-width, 150px);
  }
.Overlay[data-variant="select"] {
    min-width: 225px;
    min-width: var(--menu-select-min-width, 225px);
  }
.Overlay > [data-component="menu-contents"],.Overlay > * > .List {
    display: flex;
    flex-direction: column;
  }
.Overlay > [data-component="menu-arrow"] {
    color: var(--menu-bg-color);
  }
.Overlay[data-variant="menu"] {
    min-width: 150px;
    min-width: var(--menu-menu-min-width, 150px);
    --menu-select-option-divider-color: none;
  }
.Overlay[data-variant="select"],.Overlay[data-variant="menu"] {
    padding: var(--size-6) 0;
  }
:is(:is(.Overlay[data-variant="select"],.Overlay[data-variant="menu"]) > [data-component="menu-contents"],:is(.Overlay[data-variant="select"],.Overlay[data-variant="menu"]) > [data-component="menu-contents"] > .List) > * {
        border-top: var(--menu-select-option-divider-color, 1px solid var(--menu-option-divider-color));
      }
:is(:is(.Overlay[data-variant="select"],.Overlay[data-variant="menu"]) > [data-component="menu-contents"],:is(.Overlay[data-variant="select"],.Overlay[data-variant="menu"]) > [data-component="menu-contents"] > .List) > *:first-child:not(.Section) {
        border-top: none;
      }
.Overlay .Header,.Overlay .Footer,.Overlay .Item {
    display: block;
    padding: var(--size-6) var(--size-12);
    --btn-font-weight: var(--control-button-weight);
  }
[data-block="true"]:is(.Overlay .Header,.Overlay .Footer,.Overlay .Item) {
      padding: 0;
    }
:is(.Overlay .Header,.Overlay .Footer,.Overlay .Item):first-child {
      padding-top: 0;
    }
:is(.Overlay .Header,.Overlay .Footer,.Overlay .Item):last-child {
      padding-bottom: 0;
    }
.Overlay .List {
    max-height: 350px;
    max-height: var(--menu-list-height, 350px);
    overflow-y: scroll;
  }
:is(.Overlay .List) > * {
      flex-shrink: 0;
    }
.Overlay .Divider {
    height: 1px;
    background: var(--menu-border-color);
    margin: 6px 0px;
    border: none;
    padding: 0;
  }
:is(.Overlay .Divider) + * {
      --menu-select-option-divider-color: none;
    }
.Overlay .Section {
    background: var(--menu-section-bg-color);
    padding: var(--size-6) var(--size-12);
    color: var(--color-fg-muted);
    font-weight: 600;
    font-size: var(--size-12);
    border-top: 1px solid var(--menu-option-divider-color);
    border-bottom: 1px solid var(--menu-option-divider-color);
  }
:is(.Overlay .Section) + * {
      --menu-select-option-divider-color: none;
    }