@use '../abstracts' as *;

/* Molecule context menu */
.m-context-menu-wrapper {
  width: 100%;
  max-width: toRem(300);
}
.m-context-menu {
  z-index: 1001;
  width: fit-content;
  max-width: toRem(300);
  min-width: toRem(130);
  padding: 0;
  overflow: hidden;
  &__list {
    @extend %list-unstyled;
    display: flex;
    flex-direction: column;
    &__item {
      position: relative;
      width: 100%;
      padding: toRem(5) toRem(15);
      .a-btn{
        @include outlineOnFocus($border-radius: 4px);
        position: unset;
        justify-content: flex-start;
        gap: toRem(7);
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: toRem(5) 0;
        text-align: left;

        // Init background color change on hover/active
        &:before{
          content: "";
          position: absolute;
          z-index: -1;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }
    }
  }
}