/**
 * download-buttons.css
 * WAV/MP3 ダウンロードボタン専用スタイル (v0.8.6)
 */

/* コンテナ - メトリクスパネルと連動する高さ */
.download-buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
    flex: 1;
    /* メトリクスパネルと同じ flex 比率 */
    align-self: stretch;
    /* 親の高さに合わせる */
}

/* 共通ボタンスタイル - レイアウトのみ */
.btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    /* ラッパー内で均等に高さを分配 */
}

/* disabled 状態 - 独自スタイル */
.btn-download:disabled {
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: not-allowed;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* WAV ボタン (プライマリ - 大きめ, 高さ比率 7) */
button#download-wav-btn.btn-download-wav {
    padding: 1.5rem 2rem;
    font-size: 1.25rem;
    font-weight: 600;
    flex: 7;
}

/* MP3 ボタン (セカンダリ, 高さ比率 3) */
button#download-mp3-btn.btn-download-mp3 {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    flex: 3;
}

/* 準備完了状態 - btn-rich を継承、プリセットカラーで上書き */
.btn-download:not(:disabled) {
    /* btn-rich の CSS 変数をプリセットカラーで上書き */
    --rich-bg-start: var(--preset-color, #22c55e);
    --rich-border: var(--preset-color, #22c55e);
}

/* スピナー */
.download-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.download-spinner.hidden {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* スピナー表示時はアイコンを隠す */
.btn-download:has(.download-spinner:not(.hidden)) .download-icon {
    display: none;
}

/* ラベル */
.download-label {
    white-space: nowrap;
}

.download-label small {
    font-size: 0.7em;
    opacity: 0.8;
    font-weight: 400;
}