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

NPK UI Design System

.Overlay {
  display: flex;
  flex-direction: column;
  min-width: var(--menu-min-width, 200px);
  width: max-content;
  position: absolute;
  top: 0;
  left: 0;
  --menu-bg-color--internal: var(--menu-bg-color);
  --menu-fg-color--internal: var(--menu-fg-color);
  --menu-border-color--internal: var(--menu-border-color);

  background: var(--menu-bg-color--internal);
  color: var(--menu-fg-color--internal);
  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;

  &[data-component="submenu"] {
    min-width: var(--menu-menu-min-width, 150px);
  }

  &[role="listbox"] {
    min-width: var(--menu-select-min-width, 225px);
  }

  &[data-variant="emphasizedItem"] {
    min-width: auto;
    --control-padding: var(--size-18);
  }


  &[data-variant="dark"] {
    min-width: var(--menu-menu-min-width, 100px);
    --menu-bg-color--internal: var(--tooltip-bg-color);
    --menu-select-option-divider-color: none;
    --menu-fg-color--internal: var(--tooltip-fg-color);
    --btn-fg-color: var(--menu-fg-color--internal);
    --menu-border-color--internal: hsl(from var(--menu-bg-color--internal) h s calc(l + 10));
  }

  & > [data-component="menu-contents"],
  & > * > .List {
    display: flex;
    flex-direction: column;
  }

  & > [data-component="menu-arrow"] {
    color: var(--menu-bg-color--internal);
  }

  &[role="menu"] {
    min-width: var(--menu-menu-min-width, 150px);
    --menu-select-option-divider-color: none;
  }

  &[role="listbox"],
  &[role="menu"] {
    padding: var(--size-6) 0;

    & > [data-component="menu-contents"],
    & > [data-component="menu-contents"] > .List {
      & > * {
        border-top: var(--menu-select-option-divider-color, 1px solid var(--menu-option-divider-color));
      }

      & > *:first-child:not(.Section) {
        border-top: none;
      }
    }
  }

  .Header, .Footer, .Item {
    display: block;
    padding: var(--size-6) var(--size-12);
    --btn-font-weight: var(--control-button-weight);

    &[data-block="true"] {
      padding: 0;
    }

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  .List {
    max-height: var(--menu-list-height, 350px);
    overflow-y: scroll;

    & > * {
      flex-shrink: 0;
    }
  }

  .Divider {
    height: 1px;
    background: var(--menu-border-color--internal);
    margin: 6px 0px;
    border: none;
    padding: 0;

    & + * {
      --menu-select-option-divider-color: none;
    }
  }

  .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);

    & + * {
      --menu-select-option-divider-color: none;
    }
  }
}