/*General rule: base color background.
*
* Hover: Darker box-shadow.
*
* Focus: Darker box-shadow and lighter background
*
*/

/* 📺 XXL devices (very large screens, more than 1400px)
   Nessuna media query necessaria: è lo stile di default */
.filament-btn,
.ec-button.ec-today{
    background-color: var(--white); /* Use the same color as the edit button */
    color: var(--orange200);
    border: var(--orange200) 1px solid;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
}
.ec-button.ec-today{
    height:22px;
} 

.filament-btn i {
    margin-right: 8px;
}

.filament-btn:hover,
.ec-button.ec-today:hover {
    box-shadow: 0 0 0 3px var(--orange300alpha); 
}

.filament-btn:focus,
.ec-button.ec-today:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--orange300alpha);; 
    background-color: var(--orange100);
    color: var(--white);
}

.filament-btn:disabled {
    color: var(--orange200);  /*keep the same colour*/
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-success{
    color: var(--green100);
    border: 1px solid var(--green100);
}
.btn-success:hover{
    box-shadow: 0 0 0 3px var(--green200alpha); 
    color: var(--green100);
    background-color: var(--white);
}
.btn-success:focus{
    outline: none;
    box-shadow: 0 0 0 3px var(--green200alpha);
    background-color: var(--green300);
    color: var(--white);
}

.btn-danger {
    color: var(--red100);
    border: 1px solid var(--red100);
}
.btn-danger:hover{
    box-shadow: 0 0 0 3px var(--red200alpha); 
    color: var(--red100);
    background-color: var(--white);
}
.btn-danger:focus{
    outline: none;
    box-shadow: 0 0 0 3px var(--red200alpha);  
    background-color: var(--red300);
    color: var(--white);
}




/* 🖥️ XL devices (1200px - 1399px) */
@media (max-width: 1399.98px) {
    /* ... */
}

/* 🖥️ Large devices (992px - 1199px) */
@media (max-width: 1199.98px) {
    /* ... */
}

/* 💻 Medium devices (768px - 991px) */
@media (max-width: 991.98px) {
    
}

/* 📱 Small devices (576px - 767px) */
@media (max-width: 767.98px) {
    
}

/* 🌐 Extra small devices (less than 576px) */
@media (max-width: 575.98px) {

    
}