/// main-navigation-menu.less - Sidebar menu

.main-navigation-menu {
  @transition-attr: background-color 0.7s;

  display: flex;
  flex-direction: column;
  margin: 1em 1em;
  transition: @transition-attr;

  > .nav-element {
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: @transition-attr;

    > .ethlance-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      padding: 0.5em;
      margin: 0.7em;
      background-color: #color[purple];
      transition: @transition-attr;
      width: 35px;
      height: 35px;
    }

    > .label {
      position: relative;
      font-weight: 500;
      font-size: 1.2em;

      &::after {
        position: absolute;
        content: '';
        left: 0;
        bottom: -0.5em;
        width: 0;
        height: 1px;
        background-color: #color[purple];
        transition: all 0.3s;
      }
    }

    &.active {
      > .label {
        color: black;
      }

      > .ethlance-icon {
        background-color: darken(#color[dark-purple], 10%);
      }
    }

    &:hover {
      > .label {
        &::after {
          width: 100%;
          background-color: #color[dark-purple];
        }
      }

      > .ethlance-icon {
        background-color: #color[dark-purple];
      }
    }
  }
}
