@import "../../styles/typography";
@import "../../styles/color";

$icon-gap: 14px;
%icon-position {
    .one-ui-icon + span {
        margin-left: #{$icon-gap};
    }
    span + .one-ui-icon {
        padding-left: #{$icon-gap};
        margin-left: auto;
    }
}

.one-ui-menu-item {
    @include font(family);
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 6px 12px;
    color: color(dark, 0.8);
    flex-wrap: wrap;
    width: 100%;

    @extend %icon-position;

    cursor: pointer;
    &--selected,
    &:hover {
        background: color(grey);
        color: color(dark);
    }

    &--weight {
        &-bold {
            @include font("bold");
        }
        &-normal {
            @include font("regular");
        }
    }
    &--disabled {
        opacity: 0.2;
        pointer-events: none;
    }
}