@use '../../base/variable';
aside{
  margin-right: 20px;
  margin-bottom: 100px;
  .icon{
    &.icon-sidemenu{
      background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALnRSTlMAzMfDrQS5cSKyvqOHOjcqC2RTMyeWTZOOd1pCLhgOCIJ/HKedi15WSEYSmWk92D2yHgAAAWxJREFUOMuNUleSgzAUe7IdegkdQgqQnt3c/3prEwgl7Ez0YWSkQXrG9D1WZX20GBdOul+UNxp4UuhFLp/6p8U4InuuXtyvmebO9MgyvbHdZuFEj7n9mAY6uI+2B1PMQ1c5b4bdLzNojrWWDZzr9Ikb/J6m2NECtKJnzkmtO1Vz32Z5pRq4MHuDqRICyMkiDkdR5G3GujPwq2zNAI0yAAaZAORUW/TVoQ7FAgQ5gOyTSK/M8BF3BiuQS6mZETW2dZFtzsmWiNx395NDS7jwqO7OyVotGX4yF17LYtwXdAMpiarzioVPnLUD6d1R+Kz40FOkRFfW7QJsZrrHzjQyUAV9khKy04HoHaEogkH2E+RKp2M1vBS6LF7GjeEGNqzwlQN3Ygg5Wtib119aC5tGhtpBHt3C1Hv09yjh8chgg6lJoizudcGek7mqVvE1JBvPd10ycKclrAMTCs4WW/oHjVtGF2YNhkX4wj7QV/gDHrcSzCNIwDQAAAAASUVORK5CYII=');
    }
    &.icon-sidetop{
      background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAQlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////8IX9KGAAAAFnRSTlMAzF8wNsPHM75IPidCK0OphXtyDLYWIEJABAAAAIlJREFUOMvtytsOgjAURNE5tvRCuQn6/7/qsUaqKY4h4ZHJvO2F/5uEbFIQGAgK0oUs4fClWzC0B5GGiF67Cs86Eblf9e6HMI1INCJ22BbaXcQToNsSPvcXyMLWfcAb1MLmXgDab5G0dyigElFciwJWYYro8QFWMaOsBvDznQPdCQjwFCzjuGDfHn+FBHlvISY6AAAAAElFTkSuQmCC');
    }
    &.icon-sideqq{
      background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABMUlEQVQ4T53TrWvXURTH8dfHB3CyGS0mm0yMsjKD2QcGIou6JjZxccKKK66LSQ1iEEw6cdWysCiu7R8wiCbxgSMXft/x5Sub33nK5Tx83px7z7kxsKo6hru4hdlJ+iOe4kmS331J+k5VncAGLg/BE/89rif50eWHgEdY3kfchR8mWfkLUFUn8RntPMi+4nTXxV4HVTWPD/8Qd+mLSbab0wfcweORgKUkz4aAN7gyEvA6yY09QFVdxUtMjwR8w80km6mqM/iEUyPFXdkXnGuAddw/pLgrX2uAXZz9T8BOA3zHJq4dAlJ4i0sNcAFt19sjLo6EPMcSzvf3YAGv0D7TQdb+wUKSd/0xTqGt6PGBssWOYGYQb9eeSfKr38Ft3GujwU9s4cEEuoo5HMUO1pO8aNA/evBej0fxIBEAAAAASUVORK5CYII=');
    }
  }
  ul{
    height: 120px;
    li{
      margin-bottom: 5px;
      &:first-of-type{
        span{
          background-color: $defaultColor;
        }
        &.on,&:hover{
          span{
            background-color: darken($color: $defaultColor, $amount: 7);
          }
        }
      }
      &.on,&:hover{
        span{
          background-color: #666;
        }
      }
      &:hover{
        .aside-tooltip{
          display: block;
        }
      }
      span{
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background-color: #aaa;
        transition: .1s all ease-in;
        cursor: pointer;
        &#retTop{
          display: none;
        }
        i{
          width: 25px;
          height: 25px;
          
        }
      }
      .aside-tooltip{
        display: none;
        width: 180px;
        height: 340px;
        top: 50%;
        left: -200px;
        border-radius: 10px;
        transform: translateY(-50%);
        box-shadow: 0px 5px 10px 0px rgba(200, 200, 200, 0.2);
        &-arrow{
          width: 50px;
          height: 25px;
          top: 50%;
          left: 167px;
          transform: translateY(-50%) rotate(-90deg);
          overflow: hidden;
          &::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
            top: 0;
            left: 50%;
            box-shadow: 1px 1px 10px 0px rgba(200, 200, 200, 0.2);
          }
        }
        &-main{
          .btn{
            width: 120px;
            height: 36px;
            line-height: 36px;
            background-color: $defaultColor;
            border-radius: 100px;
            text-align: center;
            color: #fff;
            &:hover{
              background-color: lighten($color: $defaultColor, $amount: 10);
            }
          }
          i{
            width: 16px;
            height: 16px;
            margin-right: 3px;
          }
        }
      }
    }
  }
}