@import "../../helpers";
.sf-menu-item {
  --link-text-decoration: none;
  --button-width: 100%;
  display: flex;
  align-items: center;
  text-transform: var(--menu-item-text-transform);
  cursor: pointer;
  @include font(
                  --menu-item-font,
                  var(--font-weight--normal),
                  var(--font-size--base),
                  1.4,
                  var(--font-family--secondary)
  );
  &__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  &__icon {
    --icon-color: var(--c-gray);
    margin: var(--menu-item-icon-margin, 0 var(--spacer-xs) 0 0);
  }
  &__count {
    margin: var(--menu-item-count-margin, 0 0 0 auto);
    color: var(--menu-item-count-color, var(--c-gray));
  }
  &__mobile-nav-icon {
    display: var(--menu-item-mobile-nav-icon-display, flex);
    margin: var(--menu-item-mobile-nav-icon-margin, 0 0 0 var(--spacer-base));
  }
  &__label {
    color: var(--menu-item-label-color, var(--c-dark-variant));

  }
  &.is-active {
    --menu-item-label-color: var(--c-primary);
  }
  &:hover {
    --menu-item-label-color: var(--c-white  );
  }
  @include for-desktop {
    --menu-item-mobile-nav-icon-display: none;
  }
}