@import "../../../styles.sass"

#side-menu
    width: 70px
    height: 100%
    padding-top: 70px
    background-color: #00b140
    float: left
    position: fixed
    top: 0
    left: 0
    z-index: 99
    ul
        list-style: none
        float: left
        width: 100%
        padding: 34px 0 0 0
        li
            cursor: pointer
            position: relative
            width: 100%
            height: 75px
            display: flex
            justify-content: center
            align-items: center
            &::after
              width: 50%
            &.active
                &::after
                  width: 93%
                  height: 13px
                  content: ""
                  position: absolute
                  border-top: 10px solid transparent
                  border-bottom: 10px solid transparent
                  border-right: 8px solid #f1f2f3
                  right: -1px
                  top: 50%
                  margin-top: -8px
            i
              display: block
              background-size: contain
              background-repeat: no-repeat
            &.menu-icon
                i
                  width: 20px
                  height: 18px
                  background-image: url(#{$sideMenuAssetPath}/analytics-icon.svg)
            &.user-icon
                i
                  width: 20px
                  height: 22px
                  background-image: url(#{$sideMenuAssetPath}/user-icon.svg)
            &.map-icon
                i
                  width: 24px
                  height: 16px
                  background-image: url(#{$sideMenuAssetPath}/live-view.svg)
            &.obd-icon
                i
                  width: 18px
                  height: 30px
                  background-image: url(#{$sideMenuAssetPath}/obd.svg)
            &.predict-icon
                i
                  width: 22px
                  height: 22px
                  background-image: url(#{$sideMenuAssetPath}/maintainenece.svg)
.side-menu-tooltip-container
      position: fixed;
      top: 100px;
      left: 44px;
      z-index: 999999;
      height: 32px;
      padding: 3px 12px 0;
      border-radius: 13px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
      background-color: #ffffff;
      display: inline-block
      min-width: 112px;
      text-align: center;
      pointer-events: none;
      span
        font-size: 12px;
        color: #222222;
        font-family: $openSansSemiBold