$menu-item: #{$prefix}-menu-item;
$menu-item-content: #{$menu-item}__content;
$menu-item-custom-render: #{$menu-item}--customRenderer;
$menu-item-phone: #{$menu-item}__custom-phone-render;
// dimsum components
$dsicon: #{$prefix}-icon;

$addon: #{$prefix}-menu-item__addon;

.#{$menu-item}{      
  display: flex;
  transition: background-color duration(fast) easing(base);
  align-items: center;
  padding: 0 space(xxs);
  height: space(l);
  min-width: space(l) * 4.2;
  max-width: space(l) * 12;
  border: 1px solid transparent;
  &:hover, &[aria-expanded="true"] {
    border-color: color(brand-primary, 600);
    .#{$menu-item}__addon--fixedItem {
      span {
        transition: unset;
        background-color: inherit;
      }
    }

    .#{$addon}:last-child {
      opacity: 1;
    }
  }

  .#{$menu-item-content} {
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;
    height: space(m);
    margin-left: space(xs) * 1.5;
    margin-right: space(xs);
    min-width: 0;
    display: flex;
    align-items: center;
    flex: 1;
  }

  &--disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  
  .#{$menu-item-custom-render}{
    &:not(:hover) .#{$addon}:last-child {
      opacity: 1;
    }
  }

  &--fixedItem:active {
    pointer-events: none;
  }

  &:focus-within {
    .#{$addon}:last-child {
      opacity: 1;
    }
  }

  &:focus {
    background-color: color(brand-primary, 200);
    outline: none;

    .#{$addon}:last-child {
      opacity: 1;
    }
  }

  &:active {
    background-color: color(brand-primary, 200);

    .#{$addon}:last-child {
      opacity: 1;
    }    
  }

  &[role='menuitemcheckbox'], &[role='menuitemradio'] {
    .checkable-mark {
      svg {
        stroke: color(brand-primary, 600);
      }
    }
    .#{$menu-item}__addon:last-child {      
      margin-left: space(xxs);
    }
    .#{$menu-item}__addon--fixedItem {
      span {
        border: unset;
      }
    }
  }
  &.no-options{
    pointer-events: none;
    color: color(neutral, 500);
  }
  


  &__addon {    
    min-width: space(s);
  }

  &__addon:first-child {
    margin-left: space(xs);
  }

 // todo: maybe we don't need this if we use addon-block
  >.#{$dsicon}:first-child {
    margin-right: space(xs);
  }

  >.#{$dsicon}:last-child {
    margin-left: space(xs);
  }

  // Phone
  &--menu-type-phone{
    padding: 0 space(s);
    cursor: pointer;
    .#{$menu-item-content} {
      margin: 0 space(xs) 0 0;
      justify-content: flex-end;
      color: color(neutral, 500);
      font-weight: 600;
      font-size: font-size(300);
    }
    .#{$menu-item-phone}{
      margin: 0;
      padding: 0;
      color: color(brand-primary, 700);
      font-weight: 600;
      font-size: font-size(400);
    }
    &:active {
      .#{$menu-item-content} {
        color: color(neutral, 000);
      }
      .#{$menu-item-phone}{
        color: color(neutral, 000);
      }
    }
  }

}