.container {
  width: 257px;
  border-radius: 29px;
  height: 58px;
  background: #123D66;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: height 0.3s ease;

  &.overviewMode {
    height: 40px;
    border-radius: 20px;
    margin-bottom: 10px;

    .slider {
      height: 40px;
      border-radius: 20px;
      margin-bottom: 10px;
    }
  }

  .slider {
    position: absolute;
    width: 131px;
    border-radius: 29px;
    height: 58px;
    background: linear-gradient(180deg, rgb(28, 192, 255), rgb(82, 148, 255) 100%);
    transition: transform 0.3s ease, height 0.3s ease;
    transform: translateX(0);

    &.checked {
      transform: translateX(126px);
    }
  }

  .textWrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    span {
      width: 80px;
      font-size: 20px;
      // font-family: 'DingTalk JinBuTi';
      font-weight: 700;
      line-height: 24px;
      text-align: center;
      transition: color 0.3s ease;
      color: rgb(97, 148, 199);

      &.active {
        color: rgb(255, 255, 255);
      }
    }
  }
} 