.easyvSwitch {
  width: 184px;
  height: 40px;
  background: #232630;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
  border-radius: 20px;
  ul {
    padding: 4px;
    height: 100%;
    position: relative;
    li {
      width: 50%;
      height: calc(100% - 8px);
      position: absolute;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      span {
        color: rgba(255, 255, 255, 0.64);
        font-size: 14px;
        transition: color 0.3s ease-in-out;
      }
    }
    & > li:last-child {
      right: 4px;
    }
  }
  .activate {
    .liAction {
      span {
        color: #fff;
      }
    }
    &::before {
      transition: all 0.3s ease-in-out;
      content: '';
      position: absolute;
      background: #3d404c;
      border-radius: 16px;
      width: 50%;
      height: calc(100% - 8px);
      display: inline-block;
      right: calc(50% - 4px);
      z-index: 1;
      text-align: center;
    }
  }
  .activate-1 {
    &::before {
      right: 4px;
    }
  }
}
