/* ===== ROOT CONFIG ===== */
.fx-wg{

    all: initial;
    font-family: Arial;

    --fx-wg-width:200px;
    --fx-wg-height:25px;
    --fx-wg-bg:#ffffff;
    --fx-wg-primary:#ff7a00;
    --fx-wg-accent:#22c55e;
    --fx-wg-font_size:14px;

    width: var(--fx-wg-width);
    height: var(--fx-wg-height);

    color:white;

    display:flex;
    align-items:left;
    gap:calc(var(--fx-wg-height) * 0.1);
    /*/padding:calc(var(--fx-wg-height) * 0.2);/*/
    padding:calc(var(--fx-wg-height) * 0.15);
    border-radius:calc(var(--fx-wg-height) * 0.25);
    background:#00000040;

    flex-direction:column;
}

.fx-wg .fx-wg-title{
    height: 14px;
    padding-left: 1%;
    font-size: 14px;
}

.fx-wg .fx-wg-controls{
    height: 100%;
    display:flex;
    align-items:center;
    
    gap:calc(var(--fx-wg-height) * 0.1);
}

/* ===== BUTTONS ===== */
.fx-wg .fx-wg-btn{
    height:100%;
    aspect-ratio:1/1;

    padding: 0;

    border:none;
    /*/border-radius:6px;/*/
    border-radius:calc(var(--fx-wg-height) * 0.18);
    font-size:var(--fx-wg-font_size);
    font-weight:bold;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;

    color:white;
}

.fx-wg .fx-wg-connect{
    background:#ff3b3b;
}

.fx-wg .fx-wg-connect.on{
    background:var(--fx-wg-accent);
}

.fx-wg .fx-wg-scan{
    background:var(--fx-wg-primary);
}

.fx-wg .fx-wg-connect svg{
    width:18px;
    height:18px;
}

/* ===== SELECT ===== */
.fx-wg .fx-wg-select-slot{
    position:relative;
    width:100%;
    height:100%;
}

.fx-wg .fx-wg-select-box{
    position:absolute;
    inset:0;
    z-index:1;
}

.fx-wg .fx-wg-select-selected{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 8px;
    background:#f1f1f1;
    color:#222;
    border:1px solid #ccc;
    border-radius:6px;
    cursor:pointer;
    font-size:var(--fx-wg-font_size);
}

.fx-wg .fx-wg-select-selected::after{
    content:"▼";
    font-size:10px;
    opacity:0.6;
}

.fx-wg .fx-wg-select-items{
    position:absolute;
    top:110%;
    left:0;
    right:0;
    display:none;
    background:white;
    color:#222;
    border-radius:6px;
    box-shadow:0 6px 12px rgba(0,0,0,0.2);
    z-index:999;
    font-size:var(--fx-wg-font_size);
}

.fx-wg .fx-wg-select-items div{
    border-radius:6px;
    padding:6px 8px;
    cursor:pointer;
}

.fx-wg .fx-wg-select-items div:hover{
    border-radius:6px;
    background:#ffe4cc;
}

.fx-wg .fx-wg-select-items .active{
    background:var(--fx-wg-accent);
}

/* ===== PROGRESS ===== */
.fx-wg .fx-wg-progress-box{
    position:absolute;
    inset:0;
    z-index:5;
    display:none;
    background:#fff3e6;
    border-radius:6px;
    overflow:hidden;
}

.fx-wg .fx-wg-progress-bar{
    width:0%;
    height:100%;
    background:var(--fx-wg-primary);
}

/* ===== BADGE ===== */
.fx-wg .fx-wg-device-count{
    position:absolute;
    top:-6px;
    right:-6px;
    z-index:50;
    padding:2px 6px;
    font-size:10px;
    background:var(--fx-wg-accent);
    color:white;
    border-radius:10px;
}

/* ===== ANIMATION ===== */
.fx-wg .radar-icon svg{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    width:100%;
    transform-origin:center;
}

.fx-wg .scanning .radar-icon svg{
    animation:fx-wg-spin 0.7s linear infinite;
}

@keyframes fx-wg-spin{
    from{transform:rotate(0);}
    to{transform:rotate(360deg);}
}