.menuItem {
  box-sizing: border-box;
  border-right: 4px solid transparent;

  .icon1 {
    background: url('./images/1.png') no-repeat center;
    background-size: contain;
  }

  .icon2 {
    background: url('./images/2.png') no-repeat center;
    background-size: contain;
  }

  .icon3 {
    background: url('./images/3.png') no-repeat center;
    background-size: contain;
  }

  .icon4 {
    background: url('./images/4.png') no-repeat center;
    background-size: contain;
  }

  .icon5 {
    background: url('./images/5.png') no-repeat center;
    background-size: contain;
  }

  .icon6 {
    background: url('./images/6.png') no-repeat center;
    background-size: contain;
  }

  &.active,
  &:hover {
    background-color: #e9fff8;
    color: #2dc7aa;
    border-right-color: #2dc7aa;

    .icon1 {
      background: url('./images/1-active.png') no-repeat center;
      background-size: contain;
    }

    .icon2 {
      background: url('./images/2-active.png') no-repeat center;
      background-size: contain;
    }

    .icon3 {
      background: url('./images/3-active.png') no-repeat center;
      background-size: contain;
    }

    .icon4 {
      background: url('./images/4-active.png') no-repeat center;
      background-size: contain;
    }

    .icon5 {
      background: url('./images/5-active.png') no-repeat center;
      background-size: contain;
    }

    .icon6 {
      background: url('./images/6-active.png') no-repeat center;
      background-size: contain;
    }
  }
}