@import '../../styles/variables';
@import '../../styles/mixins';

$menu-item-height: 48px;

.Menu {
  &__item {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: $white;
    border: 0;
    border-left: 3px solid transparent;
    transition: 0.22s ease;
    padding: 0 0 0 16px;
    height: 48px;
    cursor: pointer;
    outline: none;
    background: transparent;
    width: 100%;
    text-align: left;


    &:hover {
      color: $white;
      background: darken($gray20, 5%);
    }

    &_active {
      background: darken($gray20, 8%);
      color: $brand-color;
    }

    &_disabled,
    &_disabled:hover {
      color: $gray70;
      background: transparent;
      border-color: transparent;
      cursor: default;
      pointer-events: none;
    }

    &_marked {
      &:before {
        content: '';
        @include size(8px);
        position: absolute;
        top: 50%;
        left: 5px;
        display: inline-block;
        margin-top: -4px;
        border-radius: 50%;
        background: $error-color;
      }
    }
  }

  &__icon {
    height: 16px;
    margin: -2px 8px 0 0;
  }
}