.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92px;
  padding: 10px 8px 8px;
  color: @text-color;
  font-size: 12px;
  border: 1px solid rgba(22, 100, 255, 0.05);
  border-radius: 4px;
  cursor: pointer;

  &__icon {
    display: block;
  }
  &__active-icon {
    display: none;
  }

  &:hover,
  &--active {
    background: rgba(22, 100, 255, 0.03);
    border: 1px solid @primary-color;

    .category-item__icon {
      display: none;
    }
    .category-item__active-icon {
      display: block;
    }
  }
}
