.device-channel-warp {
  display: flex;

  .left-warp {
    position: relative;
    margin-right: 16px;
    padding: 20px;
    background-color: #fff;
    border-radius: 2px;

    .left-content {
      width: 0;
      height: 100%;
      overflow: hidden;

      &.active {
        width: 260px;
      }
    }

    .left-warp--btn {
      position: absolute;
      top: 50%;
      right: 0;
      padding: 20px 4px;
      color: rgba(#000, 0.3);
      background-color: rgba(#f0f0f0, 6);
      border-radius: ~'100% 0 0 100% / 50% 0 0 50%';
      cursor: pointer;

      &:hover {
        color: rgba(#000, 0.5);
        background-color: rgba(#f0f0f0, 8);
      }

      &.active {
        right: 50%;
        background-color: transparent;
        border-radius: 0;
        transform: translateX(50%) rotate(180deg);
      }
    }
  }

  .right {
    flex: 1;
  }
}
