/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

@layer components {
    .ratio-sticker {
        /* Equal width notes via CSS variable for easy tuning */
        --wizard-option-width: 180px;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        list-style: none;
        padding: 0;
        margin: 0;

        @media (max-width: 768px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        & .ratio-sticker__option {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 140px;
            /* Force uniform width for all option buttons in a row */
            width: var(--wizard-option-width, 180px);
            padding: 1rem 1.25rem;

            @media (max-width: 768px) {
                width: 100%;
                min-width: 0;
                padding: 0.75rem 0.5rem;
            }
            background: #fff7da; /* Post-it žltá */
            border: 1px solid rgba(0, 0, 0, .1);
            font-family: var(--font-typewriter, 'Courier New', Courier, monospace);
            position: relative;
            cursor: pointer;
            box-shadow: 2px 4px 8px rgba(0, 0, 0, .15);
            transition: transform .2s ease, box-shadow .2s ease;

            /* Náhodné rotácie pre lístky */
            &:nth-child(odd) { transform: rotate(-1.5deg); }
            &:nth-child(even) { transform: rotate(1.2deg); }
            &:nth-child(3n) { transform: rotate(2deg); }
            &:nth-child(4n) { transform: rotate(-2.5deg); }

            &:hover {
                transform: translateY(-4px) rotate(0deg) scale(1.02);
                box-shadow: 4px 10px 15px rgba(0, 0, 0, .2);
                z-index: 2;
            }

            & .ratio-sticker__pin {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                width: 12px;
                height: 12px;
                background: radial-gradient(circle at 30% 30%, #ff4d4d, #990000);
                border-radius: 50%;
                transform: translate(-50%, -50%) scale(0);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                opacity: 0;
                transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
                z-index: 3;
            }

            & .ratio-sticker__option-name {
                font-size: 1rem;
                line-height: 1.2;
                text-align: center;
            }

            & .ratio-sticker__option-stamp {
                display: none;
            }
        }

        & input:checked + .ratio-sticker__option {
            background: #f1ebd3;
            transform: translateY(2px) rotate(0deg);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            outline: none;

            & .ratio-sticker__pin {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            & .ratio-sticker__option-stamp {
                position: absolute;
                inset: auto 5px 5px auto;
                color: rgba(177, 42, 42, 0.6);
                border: 1px solid currentColor;
                font-size: 0.65rem;
                padding: 1px 3px;
                transform: rotate(-15deg);
                pointer-events: none;
                display: block;
            }
        }
    }
}