@import "../../styles/slotui-vars.scss";
@import "../../styles/presets.scss";

.menu {
  margin: 0;
  min-width: 150px;
  padding: 0.25rem;
  cursor: pointer;
  display: inline-block;
  //background-color: var(--theme-color-background);
  color: var(--theme-color-text);

  &.bordered {
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
  }

  &.density-tight {
    .menuItem {
      padding: 0.25rem 0;
    }
  }

  &.density-default {
    .menuItem {
      padding: 0.5rem 0;
    }
  }

  &.density-kind {
    .menuItem {
      padding: 1rem 0;
    }
  }
}

.menuItem {
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border:1px solid transparent;

  @include data-hover;
  @include data-selected;

  .menuItemIcon {
    width: 16px;
    max-width: 16px;
    text-align: center;
    overflow: hidden;
    text-align: center;
    display:flex;
    justify-content: center;
    margin-left:1rem;
  }

  .menuItemText {
    flex: 1;
    margin-left:1rem;
  }

  .menuItemActions {
    // padding: inherit;
    display: block;
  }

  &.density-tight {
    //padding: 0.25rem 0;
    //margin: 0.125rem 0;
  }

  &.density-default {
    //padding: 0.5rem 0;
    // margin: 0.25rem 0;
  }

  &.density-kind {
    padding: 1rem 0;
    // margin: 0.5rem 0;
  }
}