@use '../../public/style/style.scss' as *;
// ========== 字体大小配置 ==========
$font-size-scale: 1.5;  // 字体缩放系数，调整此值可改变字体大小（数值越大字体越大，越小字体越小）

@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.connect-item-container {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  margin: 5%;
  border-radius: 10px;
  
    /* 计算过程：
     * home-bg grid: Device占第一列20%
     * device-container: 20vw × 100vh
     * device-list: 20vw × 80vh (100% × 80% of device-container)
     * connect-item-container: 80% × 10% of device-list
     * 宽度：80% × 20vw = 16vw
     * 高度：10% × 80vh = 8vh
     * 
     * 调整字体大小：
     * - 修改文件顶部的 $font-size-scale 变量
     * - 增大字体：增加变量值（如改为 1.5 或 2.0）
     * - 减小字体：减小变量值（如改为 0.5 或 0.8）
     * - 数值越大，字体越大；数值越小，字体越小
     */
  font-size: min(calc(16vw * 0.06 * $font-size-scale), calc(8vh * 0.12 * $font-size-scale));

  user-select: none;
  border: 1px solid #000000;
}

.ip-address {
    width: 100%;
    height: 100%;

    margin: 1%;
    @include flex-center;
}

.connect-btn {
    width: 100%;
    height: 60%;

    margin: 1%;
    @include flex-center;

    border-radius: 10px;
    @include highlight-btn(#004ef6);
}

.preview-btn {
    width: 100%;
    height: 60%;

    margin: 1%;
    @include flex-center;

    border-radius: 10px;
    @include highlight-btn(#00fb43);
}