@import "../styles/recholl-colors.css";

/* ページ入力テンキー — 7セグメント（旧式電子基板風） */
.grid-item.keypad-key-cell {
    background-color: #1a1c1e !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 0 2px var(--recholl-page-bg);
}

.grid-item .text-overlay.keypad-key {
    color: transparent;
    font-size: 0;
    width: 46%;
    height: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.keypad-seven-seg {
    position: relative;
    width: 100%;
    max-width: 32px;
    aspect-ratio: 10 / 15;
    filter: drop-shadow(0 0 4px rgba(0, 102, 255, 0.55))
        drop-shadow(0 0 10px rgba(0, 102, 255, 0.25));
}

.keypad-seven-seg__bar {
    position: absolute;
    background: rgba(0, 102, 255, 0.1);
    border-radius: 0;
    transition: background 0.12s ease, filter 0.12s ease;
}

.keypad-seven-seg__bar.is-on {
    background: var(--recholl-blue, #0066ff);
    filter:
        drop-shadow(0 0 2px rgba(220, 235, 255, 0.9))
        drop-shadow(0 0 5px rgba(0, 102, 255, 1))
        drop-shadow(0 0 10px rgba(0, 102, 255, 0.65));
}

/* 横棒 a / g / d — 端を斜めにした台形 */
.keypad-seven-seg__bar--a {
    top: 0;
    left: 8%;
    right: 8%;
    height: 10.5%;
    clip-path: polygon(0% 0%, 100% 0%, 84% 100%, 16% 100%);
}

.keypad-seven-seg__bar--g {
    top: 44.75%;
    left: 8%;
    right: 8%;
    height: 10.5%;
    clip-path: polygon(16% 0%, 84% 0%, 100% 50%, 84% 100%, 16% 100%, 0% 50%);
}

.keypad-seven-seg__bar--d {
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 10.5%;
    clip-path: polygon(16% 0%, 84% 0%, 100% 100%, 0% 100%);
}

/* 縦棒 b / c / f / e — 内側の辺を斜めにして台形（平行四辺形にしない） */
.keypad-seven-seg__bar--f {
    top: 2%;
    left: 0;
    width: 10.5%;
    height: 45%;
    clip-path: polygon(0% 0%, 100% 12%, 70% 88%, 0% 100%);
}

.keypad-seven-seg__bar--e {
    bottom: 2%;
    left: 0;
    width: 10.5%;
    height: 45%;
    clip-path: polygon(0% 0%, 85% 12%, 70% 88%, 0% 100%);
}

.keypad-seven-seg__bar--b {
    top: 2%;
    right: 0;
    width: 10.5%;
    height: 45%;
    clip-path: polygon(100% 0%, 0% 12%, 30% 88%, 100% 100%);
}

.keypad-seven-seg__bar--c {
    bottom: 2%;
    right: 0;
    width: 10.5%;
    height: 45%;
    clip-path: polygon(100% 0%, 15% 12%, 30% 88%, 100% 100%);
}

/* 押下時だけ短く発光 */
@keyframes keypad-cell-voltage {
    0% {
        background-color: #1a1c1e;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.06),
            0 0 0 2px var(--recholl-page-bg);
    }
    45% {
        background-color: #243040;
        box-shadow:
            inset 0 0 14px rgba(0, 102, 255, 0.5),
            0 0 0 2px var(--recholl-page-bg),
            0 0 14px rgba(0, 102, 255, 0.75);
    }
    100% {
        background-color: #1a1c1e;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.06),
            0 0 0 2px var(--recholl-page-bg);
    }
}

@keyframes keypad-segment-flash {
    0%,
    100% {
        filter:
            brightness(1)
            drop-shadow(0 0 4px rgba(0, 102, 255, 0.55))
            drop-shadow(0 0 10px rgba(0, 102, 255, 0.25));
    }
    45% {
        filter:
            brightness(2.2)
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 14px rgba(0, 102, 255, 1));
    }
}

.grid-item.keypad-key-cell.is-voltage-pulse {
    animation: keypad-cell-voltage 0.16s ease-out;
}

.grid-item.keypad-key-cell.is-voltage-pulse .keypad-seven-seg {
    animation: keypad-segment-flash 0.16s ease-out;
}

.grid-item.keypad-key-cell.is-voltage-pulse .keypad-seven-seg__bar:not(.is-on) {
    background: rgba(0, 102, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    .keypad-seven-seg__bar {
        transition: none;
    }

    .grid-item.keypad-key-cell.is-voltage-pulse {
        animation: none;
        background-color: #243040 !important;
    }

    .grid-item.keypad-key-cell.is-voltage-pulse .keypad-seven-seg {
        animation: none;
    }
}