@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;
  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;

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

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

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

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

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

  &[data-variant="select"],
  &[data-variant="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);
    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;
    }
  }
}