@use '../public/style/style.scss' as *;

// ========== 样式定义 ==========
.device-container {
  width: 100%;
  height: 100%;
  border: 1px solid #000000;

  // 更新设备列表
  .device-update {
    width: 100%;
    height: 10%;
   
    @include flex-row-between;
    
    .device-update-title {
      width: 70%;
      height: 100%;
      user-select: none;
      
      @include flex-center;
    }

    .device-update-btn {
      width: 30%;
      height: 100%;
      @include flex-center;

      .update-btn {
        width: 50% !important;
        height: 50% !important;
      }
    }

    background-color: #efe8e88d;
  }

  /* 设备列表 */
  .device-list {
    width: 100%;
    height: 80%;

    @include flex-column-start;
    border: 1px solid #000000;
    .connect-item-container {
      width: 90%;
      height: 8%;
      @include flex-row-between;
      // border: 1px solid #000000;
    }
  }

  // 添加设备
  .device-add {
    width: 100%;
    height: 10%;

    @include flex-row-between;

    .ip-input {
      width: 80%;
      height: 50%;
      @include flex-center;
      
      
      input {
        outline: none;
        border: none;
        text-align: center;
        width: 90%;
        height: 100%;

        border: 1px solid #000000;
      }
    }
    .add-btn {
      width: 20%;
      height: 100%;
      cursor: pointer;
      
      @include flex-center;
      @include div-btn-hover-effect;
      @include div-btn-pressed-effect;
      svg {
        width: 80%;
        height: 80%;
        pointer-events: none;
      }
    }
  }
}