/**
 * SVGアイコン用CSS
 * icons.svgスプライトファイルを使用するためのスタイル定義
 */

/* アイコンのベーススタイル */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    /* ブラウザ間の互換性のため */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* サイズバリエーション */
.icon-xs {
    width: 0.75em;
    height: 0.75em;
}

.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-md {
    width: 1em;
    height: 1em;
}

.icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.icon-xl {
    width: 1.5em;
    height: 1.5em;
}

.icon-2x {
    width: 2em;
    height: 2em;
}

.icon-3x {
    width: 3em;
    height: 3em;
}

/* 固定サイズ（ピクセル指定） */
.icon-16 {
    width: 16px;
    height: 16px;
}

.icon-20 {
    width: 20px;
    height: 20px;
}

.icon-24 {
    width: 24px;
    height: 24px;
}

.icon-32 {
    width: 32px;
    height: 32px;
}

.icon-48 {
    width: 48px;
    height: 48px;
}

/* 色のバリエーション */
.icon-primary {
    color: var(--color-primary, #007bff);
}

.icon-secondary {
    color: var(--color-secondary, #6c757d);
}

.icon-success {
    color: var(--color-success, #28a745);
}

.icon-warning {
    color: var(--color-warning, #ffc107);
}

.icon-error {
    color: var(--color-error, #dc3545);
}

.icon-white {
    color: #ffffff;
}

.icon-black {
    color: #000000;
}

/* テーマカラー対応 */
.icon-theme-primary {
    color: var(--page-theme-primary, #007bff);
}

.icon-theme-primary-dark {
    color: var(--page-theme-primary-dark, #0056b3);
}

.icon-theme-primary-light {
    color: var(--page-theme-primary-light, #66b3ff);
}

/* 回転アニメーション */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* パルスアニメーション */
.icon-pulse {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* アクセシビリティ */
.icon[aria-hidden="true"] {
    /* スクリーンリーダーから隠す */
}

.icon[aria-label] {
    /* アクセシブルなラベルがある場合 */
}