@layer components {
    :root {
        --chess-puzzle-piece-ivory-light: light-dark(
            oklch(0.995 0.006 90),
            oklch(0.96 0.01 88)
        );
        --chess-puzzle-piece-ivory-shade: light-dark(
            oklch(0.86 0.035 78),
            oklch(0.8 0.035 76)
        );
        --chess-puzzle-piece-ivory-line: oklch(0.24 0.03 52);
        --chess-puzzle-piece-ebony-light: oklch(0.45 0.025 55);
        --chess-puzzle-piece-ebony-shade: oklch(0.19 0.015 50);
        --chess-puzzle-piece-ebony-line: oklch(0.12 0.01 50);
        --chess-puzzle-piece-ebony-detail: oklch(0.9 0.025 82 / 0.9);
        --chess-puzzle-piece-shadow: oklch(0.15 0.03 50 / 0.42);
    }

    .chess-puzzle-piece {
        display: block;
        filter: drop-shadow(
            0 0.0625rem 0.0625rem var(--chess-puzzle-piece-shadow)
        );
        overflow: visible;

        &.chess-puzzle-piece--white {
            --chess-puzzle-piece-fill: url(#chess-puzzle-piece-ivory)
                var(--chess-puzzle-piece-ivory-light);
            --chess-puzzle-piece-line: var(--chess-puzzle-piece-ivory-line);
            --chess-puzzle-piece-detail: var(--chess-puzzle-piece-ivory-line);
        }

        &.chess-puzzle-piece--black {
            --chess-puzzle-piece-fill: url(#chess-puzzle-piece-ebony)
                var(--chess-puzzle-piece-ebony-light);
            --chess-puzzle-piece-line: var(--chess-puzzle-piece-ebony-line);
            --chess-puzzle-piece-detail: var(--chess-puzzle-piece-ebony-detail);
        }
    }

    .chess-puzzle-piece__sprite {
        block-size: 0;
        inline-size: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
    }

    .chess-puzzle-piece__shape {
        fill: var(--chess-puzzle-piece-fill);
        stroke: var(--chess-puzzle-piece-line);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 3;
    }

    .chess-puzzle-piece__detail {
        fill: none;
        stroke: var(--chess-puzzle-piece-detail);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }

    .chess-puzzle-piece__dot {
        fill: var(--chess-puzzle-piece-detail);
        stroke: none;
    }

    .chess-puzzle-piece__stop {
        &.chess-puzzle-piece__stop--ivory-light {
            stop-color: var(--chess-puzzle-piece-ivory-light);
        }

        &.chess-puzzle-piece__stop--ivory-shade {
            stop-color: var(--chess-puzzle-piece-ivory-shade);
        }

        &.chess-puzzle-piece__stop--ebony-light {
            stop-color: var(--chess-puzzle-piece-ebony-light);
        }

        &.chess-puzzle-piece__stop--ebony-shade {
            stop-color: var(--chess-puzzle-piece-ebony-shade);
        }
    }
}