/* common.css - Styles for common components */

.widget-container {
    position: relative;
    min-height: 200px;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--loading-overlay-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 0.375rem;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
}

.word-sound-button {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 999px;
    background: transparent;
    color: var(--bs-body-color, #212529);
    line-height: 1;
}

.word-sound-button:hover:not(:disabled) {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.word-sound-button:disabled {
    opacity: 0.65;
}

.word-sound-button-playing {
    color: var(--bs-primary, #0d6efd);
    border-color: currentColor;
}

.word-sound-button-unavailable {
    color: var(--bs-secondary-color, #6c757d);
}