/* Base button styles */

:root {
    --primary-border: #000;
    --error-border: #f00;
}

.ui-button {
    width: 100%;
    padding: 1rem;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.2s ease;
    display: flex;           /* Add these for proper */
    align-items: center;     /* vertical alignment */
    justify-content: center; /* and horizontal centering */
    cursor: pointer;
    border: 2px solid transparent;
}

/* Translate button specific styles */
#translate-button {
    background-color: blue;
    color: white;
}

/* Specific styles for the Save to Deck button */
#save-button,
#save-offline-button {
    background-color: #177a2e; /* Green background */
    color: #ffffff; /* White text */
}

#save-button:hover {
    background-color: #146926; /* Darker green on hover */
}

#save-button:disabled {
    background-color: rgb(151, 113, 42);
    color: rgb(255, 255, 255);
    cursor: not-allowed;
}

#clear-inputs-button {
    background-color: #f5c1c1;
    color: #ffffff; /* White text */
}   

/* States */

#translate-button[data-state="loading"] {
    cursor: wait;
}

#translate-button[data-state="error"] {
    border-color: var(--error-border);
}

#translate-button[data-state="rate-limited"] {
    cursor: not-allowed;
    opacity: 0.7;
    background-color: #ffc107; /* Warning yellow */
    color: #000;
}

#translate-button:disabled {
    opacity: 0.7;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Loading animation */
#translate-button[data-state="loading"]::after {
    content: "⋯";
    margin-left: 0.5rem;
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% { content: "⋯"; }
    40%, 60% { content: "⋯⋯"; }
    80%, 100% { content: "⋯⋯⋯"; }
}

/* Specific styles for the Save to Deck button */

#save-button:hover {
    background-color: #146926; /* Darker green on hover */
}

#save-button:disabled {
    background-color: rgb(151, 113, 42);
    color: rgb(255, 255, 255);
    cursor: not-allowed;
}

#clear-inputs-button {
    background-color: #f5c1c1;
    color: #ffffff; /* White text */
}   

audio-button button {
    width: 100%;
    padding: 1rem;
    border-radius: 4px;
    /* Add other styles to match your bottom buttons */
}

audio-button button[data-state="generating"] {
    background-color: #666;
    cursor: wait;
}

audio-button button[data-state="preview"] {
    background-color: #1a4731; /* Your green color */
}

audio-button button[data-state="error"] {
    background-color: #991b1b;
}

.ui-button .button-text {
    transition: all 0.3s ease;
}

audio-button button {
    min-width: 44px; /* Ensures touch target size */
    transition: all 0.3s ease;
}

.audio-button {
    position: relative;
    min-width: 44px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.audio-button .emoji-text,
.audio-button .full-text {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.audio-button .full-text {
    opacity: 1;
    margin-left: 8px;
    max-width: fit-content;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compact state */
.audio-button.compact .full-text {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional hover effect for all states */
.audio-button.compact:hover .full-text {
    opacity: 1;
    margin-left: 8px;
    max-width: fit-content;
}

/* Double-sided toggle: extends .ui-button with state-dependent colors */
.double-sided-toggle {
    background-color: #2c2c2c;
    color: #666;
}

.double-sided-toggle:hover {
    color: #999;
}

.double-sided-toggle[aria-pressed="true"] {
    background-color: #1a3a6a;
    color: #93c5fd;
}