@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;

/**
 * Here is where we can override the styles of react-menu
 */
.step-ag-grid-react-menu.szh-menu {
  z-index: 900;
  color: lui.$base-type-color;
  @include lui.font-regular();

  div,
  a[role="menuitem"] {
    text-decoration: none;
    color: lui.$base-type-color;
    @include lui.font-regular();
  }

  li[role="menuitem"]:hover {
    background-color: lui.$polar;
  }

  .szh-menu__header {
    display: flex;
    align-items: center;
  }
}

/**
 * Here are styles for lui select menu
 */
.lui-select-menu.szh-menu {
  z-index: 900;
  width: 92vw;
  overflow-y: scroll;

  color: lui.$base-type-color;
  @include lui.font-light();
}

.lui-select-menuItem {
  padding: lui.$unit-xs lui.$unit-sm lui.$unit-xs lui.$unit-xs;
  display: flex;
  line-height: 1;
  transition: all 0.2s ease-in-out;
  fill: lui.$fuscous;

  &:hover {
    background-color: lui.$polar;
  }
}

.lui-select-menuItem--error {
  p {
    color: lui.$error;
  }

  .LuiIcon {
    fill: lui.$error;
  }
}

.lui-select-menuItemText {
  @include lui.font-regular();
  color: lui.$charcoal;
  margin: 0;
  padding-left: lui.$unit-lg;

  // if no icon, give it 4px to align with the group header
  &--noPadding {
    padding-left: lui.$unit-xxs;
  }
}

.lui-select-icon + .lui-select-menuItemText {
  padding-left: lui.$unit-xs;
}

.lui-select-menu-group {
  height: 32px;
  color: lui.$fuscous;
  padding-left: 0.75rem;
  text-transform: none;
  @include lui.font-semibold();
}

.lui-select-submenu {
  flex: 1;

  div[role="menuitem"] {
    padding: lui.$unit-xs lui.$unit-xs lui.$unit-xs 2.5rem;
    text-decoration: none;
    @include lui.font-regular();
    height: 40px;
  }
  // overwrite the hover color
  .szh-menu__item--hover {
    background-color: lui.$polar;
  }
}

.lui-select-submenu-with-icon {
  flex: 1;
  // width: 200px;
  div[role="menuitem"] {
    padding-left: 0;
    text-decoration: none;
    @include lui.font-regular();
    height: 40px;
  }
}

.lui-select-divider {
  margin: 0.25rem;
}


.step-ag-grid-react-menu-sub-header-icon {
  margin: lui.$unit-xs;
  fill: lui.$fuscous;
}