/*
  MFP Design System — Menu
  Production CSS for dropdown / flyout menu component.
  Import tokens.css before this file.
*/

/* ======================================================================
   MENU
   ====================================================================== */
.menu {
  background: var(--color-white);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-sm);
  padding: 4px 0;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: 38px;
  padding: 0 12px;
  cursor: pointer;
  font: var(--type-input-label);
  color: var(--color-darkest-grey);
  transition: background 100ms;
  white-space: nowrap;
}

.menu__item:hover,
.menu__item--active {
  background: var(--color-pale-grey);
  color: var(--color-darkest-grey);
}

.menu__icon {
  font-size: 20px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.menu__divider {
  height: 1px;
  background: var(--color-light-grey);
  margin: 4px 0;
}

/* ======================================================================
   NESTED / PARENT ITEMS
   ====================================================================== */
.menu__item--parent {
  justify-content: space-between;
}

.menu__item-text  { padding-top: 2px; }

.menu__item-label {
  flex: 1;
  padding-top: 1px;
}

.menu__item--parent.is-open .btn__icon {
  transform: rotate(180deg);
  transition: transform 150ms;
}

.menu__sub {
  display: none;
}

.menu__sub.is-open {
  display: block;
}

.menu__sub .menu__item {
  padding-left: 28px;
}

/* ======================================================================
   MULTI-SELECT FILTER MENU
   ====================================================================== */
.menu__search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-light-grey);
}


.menu__check-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: 38px;
  padding: 0 12px;
  cursor: pointer;
  font: var(--type-input-label);
  color: var(--color-darkest-grey);
  transition: background 100ms;
  user-select: none;
}

.menu__check-item:hover { background: var(--color-pale-grey); }

.menu__check-label { flex: 1; padding-top: 2px; }

.menu__count {
  font: var(--type-body-small);
  color: var(--color-dark-grey);
  flex-shrink: 0;
}

.menu__list-scroll {
  max-height: 240px;
  overflow-y: auto;
}

.menu__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-light-grey);
}

/* ======================================================================
   SMALL VARIANT — .menu--sm
   ====================================================================== */
.menu--sm .menu__item       { font: var(--type-input-label-sm); height: 32px; }
.menu--sm .menu__check-item { font: var(--type-input-label-sm); height: 32px; }
.menu--sm .menu__item-text  { padding-top: 2px; }
.menu--sm .menu__item-label { padding-top: 1px; }
.menu--sm .menu__check-label { padding-top: 2px; }