@import "../../../styles/themes.scss";
@import "../../../styles/typography.scss";

.monday-style-menu-item {
  @include font-default;
  display: flex;
  flex-direction: row;
  padding: $spacing-xs $spacing-small;
  @include theme-prop(color, primary-text-color);

  .monday-style-menu-item__icon-wrapper {
    margin-right: $spacing-small;
    display: flex;
    align-items: center;

    .monday-style-menu-item__icon {
      @include theme-prop(color, icon-color);
    }
  }

  &.monday-style-menu-item--disabled {
    @include theme-prop(color, disabled-text-color);

    .monday-style-menu-item__icon {
      @include theme-prop(color, disabled-text-color);
    }
  }

  &:not(.monday-style-menu-item--disabled) {
    &.monday-style-menu-item--focused {
      @include theme-prop(background-color, primary-background-hover-color);
      border-radius: $border-radius-small;
    }
  }
}