@import 'main';

$vertical_menu_width: 222px;

.menu {
  width: $vertical_menu_width;

  & > * {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .item {
    color: $color_grey;
    cursor: pointer;
    @include transition;
    @include middle;

    .icon {
      font-size: 24px;
      margin-right: 8px;
    }

    &:hover {
      color: $color_primary;
    }

    &.active {
      color: $color_default;
    }
  }

  &.menu-only-with-icons {
    width: auto;

    .item {
      .icon {
        font-size: 32px;
        margin: 0;
      }

      .text {
        font-size: 0;
      }

    }
  }
}