/**
 * 自定义节奏型图标样式
 * 使用SVG内联方式定义各种节奏型图标
 */

/* 通用样式 */
.rhythm-pattern-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    height: 80px; /* 固定高度 */
    box-sizing: border-box; /* 确保padding不影响总高度 */
    backdrop-filter: blur(3px);
}

.rhythm-pattern-icon:hover {
    background-color: rgba(240, 240, 240, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.rhythm-pattern-icon.selected {
    background-color: rgba(227, 242, 253, 0.9);
    border: 2px solid #2196F3;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.rhythm-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* 允许SVG内容稍微超出容器 */
}

.pattern-name {
    font-size: 14px;
    text-align: center;
    color: #333;
    font-weight: 500;
    white-space: nowrap; /* 防止文字换行 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* SVG通用样式 */
.rhythm-icon svg {
    width: 100%;
    height: 100%;
    max-height: 48px;
}

/* 记谱方式SVG切换 */
.rhythm-pattern-icon[data-notation="numbered"] .staff-notation {
    display: none;
}

.rhythm-pattern-icon[data-notation="staff"] .numbered-notation {
    display: none;
}

/* 默认显示五线谱记谱法 */
.rhythm-pattern-icon:not([data-notation]) .numbered-notation {
    display: none;
}

/* 三连音图标 - 五线谱样式 */
.icon-triplet .staff-notation .note {
    fill: #333;
}

.icon-triplet .staff-notation .stem {
    fill: #333;
}

.icon-triplet .staff-notation .beam {
    fill: #333;
}

/* 三连音图标 - 简谱样式 */
.icon-triplet .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold;
    fill: #333;
}

.icon-triplet .numbered-notation .arc {
    stroke: #333;
    stroke-width: 2;
    fill: none;
}

.icon-triplet .numbered-notation .line {
    stroke: #333;
    stroke-width: 2;
}

.icon-triplet .numbered-notation .number {
    font-size: 12px;
    font-weight: bold;
    fill: #333;
}

/* 二八图标 - 五线谱样式 */
.icon-28 .staff-notation .note {
    fill: #333;
}

.icon-28 .staff-notation .stem {
    fill: #333;
}

.icon-28 .staff-notation .beam {
    fill: #333;
}

/* 二八图标 - 简谱样式 */
.icon-28 .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold;
    fill: #333;
}

.icon-28 .numbered-notation .line {
    stroke: #333;
    stroke-width: 2;
}

/* 四个十六图标 - 五线谱样式 */
.icon-416 .staff-notation .note {
    fill: #333;
}

.icon-416 .staff-notation .beam {
    fill: #333;
}

.icon-416 .staff-notation .stem {
    fill: #333;
}

/* 四个十六图标 - 简谱样式 */
.icon-416 .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold;
    fill: #333;
}

.icon-416 .numbered-notation .line {
    stroke: #333;
    stroke-width: 2;
}

/* 单个四分图标 - 五线谱样式 */
.icon-quarter .staff-notation .note {
    fill: #333;
}

.icon-quarter .staff-notation .stem {
    fill: #333;
}

/* 单个四分图标 - 简谱样式 */
.icon-quarter .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold;
    fill: #333;
}

/* 切分音图标 - 五线谱样式 */
.icon-syncopation .staff-notation .note {
    fill: #333;
}

.icon-syncopation .staff-notation .beam {
    fill: #333;
}

.icon-syncopation .staff-notation .stem {
    fill: #333;
}

/* 切分音图标 - 简谱样式 */
.icon-syncopation .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold;
    fill: #333;
}

.icon-syncopation .numbered-notation .line {
    stroke: #333;
    stroke-width: 2;
}

/* 前八后十六图标 - 五线谱样式 */
.icon-816 .staff-notation .note {
    fill: #333;
}

.icon-816 .staff-notation .beam {
    fill: #333;
}

.icon-816 .staff-notation .stem {
    fill: #333;
}

/* 前八后十六图标 - 简谱样式 */
.icon-816 .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold;
    fill: #333;
}

.icon-816 .numbered-notation .line {
    stroke: #333;
    stroke-width: 2;
}

/* 前十六后八图标 - 五线谱样式 */
.icon-168 .staff-notation .note {
    fill: #333;
}

.icon-168 .staff-notation .beam {
    fill: #333;
}

.icon-168 .staff-notation .stem {
    fill: #333;
}

/* 前十六后八图标 - 简谱样式 */
.icon-168 .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold;
    fill: #333;
}

.icon-168 .numbered-notation .line {
    stroke: #333;
    stroke-width: 2;
}

/* 前小附点图标 - 五线谱样式 */
.icon-front-dotted .staff-notation .note {
    fill: #333;
}

.icon-front-dotted .staff-notation .beam {
    fill: #333;
}

.icon-front-dotted .staff-notation .stem {
    fill: #333;
}

.icon-front-dotted .staff-notation .dot {
    fill: #333;
    fill-opacity: 1; /* 确保附点可见 */
}

/* 前小附点图标 - 简谱样式 */
.icon-front-dotted .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold; /* 强制加粗 */
    fill: #333;
    fill-opacity: 1; /* 确保完全不透明 */
}

.icon-front-dotted .numbered-notation .line {
    stroke: #333;
    stroke-width: 2;
    stroke-opacity: 1; /* 确保线条可见 */
    fill: #333; /* 确保矩形填充 */
}

.icon-front-dotted .numbered-notation .dot {
    fill: #333;
    fill-opacity: 1; /* 确保附点可见 */
}

/* 后小附点图标 - 五线谱样式 */
.icon-back-dotted .staff-notation .note {
    fill: #333;
}

.icon-back-dotted .staff-notation .beam {
    fill: #333;
}

.icon-back-dotted .staff-notation .stem {
    fill: #333;
}

.icon-back-dotted .staff-notation .dot {
    fill: #333;
}

/* 后小附点图标 - 简谱样式 */
.icon-back-dotted .numbered-notation .x-symbol {
    font-size: 20px;
    font-weight: bold;
    fill: #333;
}

.icon-back-dotted .numbered-notation .line {
    stroke: #333;
    stroke-width: 2;
}

.icon-back-dotted .numbered-notation .dot {
    fill: #333;
}

/* 其他未实现节奏型的占位图标 */
.icon-placeholder rect {
    stroke: #888;
    stroke-width: 2;
}

.icon-placeholder text {
    fill: #888;
    font-size: 16px;
}

/* 添加拖动状态样式 */
.rhythm-pattern-icon.dragging {
    opacity: 0.5;
}