/* Base button styles */
.gtts-control-btn {
    position: relative;
    display: flex;
	background: red;
    width: 66px;
    height: 54px;
	color:#fff;
    justify-content: center;
    align-items: center;
    border-radius:4px;
    cursor:pointer;
    user-select:none;
	margin-left:10px;
}
/* Base button container styles */
.gtts-btn-container{
    display:flex;
    gap:8px;
}

/* Hover effect */
.gtts-control-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Loading state */
.gtts-control-btn.loading::after {
    content: "";
    display: flex;
    
    
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    justify-content: center;
    align-items: center;
}

/* Playing state */
.gtts-control-btn.playing {
    background: #555;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive for mobile */
@media(max-width:600px){
    .gtts-control-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}