@import "../common/PredefinedMixins.scss";
@import "./partial.scss";
@import "./Variables.scss";

$nav_menu_width: 250px;

.nav-item {
  @include flexDisplay();
  @include flexJustifyContent(flex-start, flex-start);
  @include flexAlignItems(center, center);
  @include flexAlignContent(center, center);
  width: 100%;
  height: 40px;
  z-index: 1;
  padding-left: 8px;
  border-radius: 8px;
  color: $popup_simple_item_fg;
  background: $popup_simple_item_bg;
  cursor: pointer;

  &:focus-visible {
    @include focus(
      $outline-offset: -2px,
      $box-shadow: $focus_box_shadow_inset
    );
  }

  .blink {
    @include partial-blink-normal;
  }

  .nav-item-cap {
    @include partial-ellipsis;
    display: inline-block;
    width: 90%;
    padding-left: 0;

    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;

    &.disabled {
      color: $popup_simple_item_disabled_fg;
      cursor: auto;
    }
  }

  &.hover {
    background: $popup_simple_item_bg_hover;

    .nav-item-cap {
      color: $popup_simple_item_fg_hover;
    }

    &.disabled {
      background-color: transparent;

      .nav-item-cap {
        color: $popup_simple_item_disabled_hover_fg;
      }
    }
  }

}