/* speedbutton Düymənin Ümumi Görünüşü */

/* 1. ANA DÜYMƏ - Ölçü və Rəng Sabitliyi */
.ideal-speedbutton {
    background-color: #ffffff !important;
    border: 1.5px solid #5ba2dc !important; 
    border-radius: 6px !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important; /* İkonun mərkəzlənməsi üçün */
    cursor: pointer !important;
    opacity: 1 !important;
    overflow: visible !important;
}

/* 2. ƏGƏR İKON SİLİNSƏ (DISABLED HALDA), ONUN YERİNİ DOLDURURUQ */
/* Bu hissə düymənin içi boş qalanda (disabled olanda) ikonu bərpa edir */
.ideal-speedbutton::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%235ba2dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.4s ease, filter 0.2s ease;
    display: block !important;
}

/* 3. HOVER ZAMANI İKONUN RƏNGİ (SVG-ni ağ edirik) */
.ideal-speedbutton:hover::after {
    filter: brightness(0) invert(1);
}

.ideal-speedbutton:hover {
    background-color: #5ba2dc !important;
}

/* 4. KLİKLƏYƏNDƏ FIRLANMA ANİMASİYASI */
.ideal-speedbutton:active::after,
.ideal-speedbutton.x-btn-pressed::after {
    animation: spin-forever 0.7s linear infinite !important;
    filter: brightness(0) invert(1);
}

/* 5. DEAKTİV HALDA İÇİNİ MƏCBURİ DOLDUR */
.ideal-speedbutton.x-btn-disabled,
.ideal-speedbutton.x-item-disabled {
    opacity: 1 !important;
    background-color: #ffffff !important;
    border-color: #5ba2dc !important;
}

/* Deaktiv halda ikonun itməməsi üçün after elementini mütləq göstər */
.ideal-speedbutton.x-btn-disabled::after {
    display: block !important;
    opacity: 1 !important;
}

/* Orijinal img elementini gizlədirik ki, bizim saxta ikonla üst-üstə düşməsin */
.ideal-speedbutton img, 
.ideal-speedbutton .x-btn-icon-el {
    display: none !important;
}

/* 6. ANİMASİYA */
@keyframes spin-forever {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}