@layer components {
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 0.8rem 1.5rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: var(--transition);
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        position: relative;
        text-decoration: none;
        line-height: 1.2;

        & .button__text {
            position: relative;
            z-index: 2;
            pointer-events: none;
        }

        & .button__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            pointer-events: none;
        }

        &.button--sm {
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
            gap: 0.5rem;
            border-radius: var(--radius-sm);

            & .button__stamp-icon {
                transform: scale(0.6);
                margin-right: -10px;
            }

            & .button__imprint {
                font-size: 1.5rem;
            }
        }

        &.button--small {
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
            gap: 0.5rem;
            border-radius: var(--radius-sm);

            & .button__stamp-icon {
                transform: scale(0.6);
                margin-right: -10px;
            }

            & .button__imprint {
                font-size: 1.5rem;
            }
        }

        &.button--md {
            padding: 0.8rem 1.5rem;
            font-size: 0.9rem;
            gap: 0.8rem;

            & .button__stamp-icon {
                transform: scale(0.8);
                margin-right: -5px;
            }

            & .button__imprint {
                font-size: 2.2rem;
            }
        }

        &.button--normal {
            padding: 0.8rem 1.5rem;
            font-size: 0.9rem;
            gap: 0.8rem;

            & .button__stamp-icon {
                transform: scale(0.8);
                margin-right: -5px;
            }

            & .button__imprint {
                font-size: 2.2rem;
            }
        }

        &.button--lg {
            padding: 1.5rem 3rem;
            font-size: 1.4rem;
            font-family: var(--font-serif);
            letter-spacing: 2px;
            gap: 1.2rem;
            border-radius: var(--radius-lg);

            & .button__stamp-icon {
                transform: scale(1.1);
            }

            & .button__imprint {
                font-size: 4rem;
            }
        }

        &.button--big {
            padding: 1.5rem 3rem;
            font-size: 1.4rem;
            font-family: var(--font-serif);
            letter-spacing: 2px;
            gap: 1.2rem;
            border-radius: var(--radius-lg);

            & .button__stamp-icon {
                transform: scale(1.1);
            }

            & .button__imprint {
                font-size: 4rem;
            }
        }

        /* Colors */

        &.button--primary {
            background: var(--color-primary);
            color: var(--color-on-primary);

            &:hover {
                opacity: 0.9;
                transform: translateY(-2px);
            }

            &:active {
                opacity: 0.8;
            }
        }

        &.button--secondary {
            background: var(--color-secondary);
            color: var(--color-on-secondary);
            --button-stamp-head-color: var(--clr-bureau-blue);

            [data-theme="dark"] & {
                --button-stamp-head-color: var(--color-primary);
            }

            &:hover {
                opacity: 0.9;
                transform: translateY(-2px);
            }

            &:active {
                opacity: 0.8;
            }
        }

        &.hero__cta {
            @media (max-width: 480px) {
                padding: 1rem 2rem;
                font-size: 1.1rem;
                gap: 1rem;

                & .button__stamp-icon {
                    transform: scale(0.8);
                }
            }
        }

        &[data-icon-animation="stamp"] {
            box-shadow: 0 6px 0 var(--shadow-color, var(--color-primary)), var(--shadow-lg);
            animation: buttonEntrance 1s ease-out 2s both, buttonAttention 4s ease-in-out 5s infinite;
            --button-glow-color: var(--color-primary);

            [data-theme="dark"] & {
                --button-glow-color: var(--color-primary);
            }

            &.button--primary {
                --shadow-color: var(--color-primary);
                --active-shadow-color: var(--color-primary);
                --button-glow-color: var(--color-surface);
            }

            &.button--secondary {
                --shadow-color: var(--color-secondary);
                --active-shadow-color: var(--color-secondary);
                --button-glow-color: var(--color-surface); /* Kontrastná modrá namiesto červenej na červenom pozadí */

                [data-theme="dark"] & {
                    --button-glow-color: var(--color-primary); /* Svetlejšia modrá v dark móde */
                }
            }

            &[data-entrance-animation="none"] {
                animation: buttonAttention 4s ease-in-out 5s infinite;
            }

            & .button__stamp-icon {
                width: 32px;
                height: 40px;
                background: var(--color-border);
                position: relative;
                border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
                transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), filter 0.3s ease;
                flex-shrink: 0;
                display: block;

                &::before {
                    content: "";
                    position: absolute;
                    top: -12px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 24px;
                    height: 24px;
                    background: var(--button-stamp-head-color, var(--color-secondary));
                    border-radius: 50% 50% 20% 20%;
                    box-shadow: inset -4px -4px 0 var(--clr-ink-blue);
                    opacity: 0.8;

                    [data-theme="dark"] & {
                        box-shadow: inset -4px -4px 0 var(--color-on-primary);
                    }
                }

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -4px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 37px;
                    height: 6px;
                    background: var(--clr-ink-blue);
                    border-radius: 2px;

                    [data-theme="dark"] & {
                        background: var(--clr-ink-light);
                        opacity: 0.2;
                    }
                }
            }

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 0 var(--shadow-color, var(--color-primary)), var(--shadow-xl);

                & .button__stamp-icon {
                    transform: translateY(-8px) rotate(-5deg);
                    filter: drop-shadow(0 15px 10px var(--color-surface));
                }
            }

            &:active {
                transform: translateY(4px);
                box-shadow: 0 2px 0 var(--active-shadow-color, var(--color-on-surface)), var(--shadow-md);

                & .button__stamp-icon {
                    transform: translateY(5px) scaleY(0.8);
                }
            }
        }

        /* Imprint Effect */

        & .button__imprint {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2);
            font-family: var(--font-serif);
            font-weight: 900;
            color: var(--color-secondary);
            opacity: 0;
            pointer-events: none;
            z-index: 3;
            border: 4px double var(--color-secondary);
            padding: 0.5rem 1rem;
            mix-blend-mode: multiply;
            transition: none;
        }

        &[data-state="clicked"] .button__imprint {
            animation: imprintFlash 0.4s ease-out forwards;
            opacity: 1;
            transform: translate(-50%, -50%) rotate(-15deg) scale(1);
        }

        /* Default hover for non-stamp buttons */

        &:not([data-icon-animation="stamp"]):hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
    }
}

@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes buttonAttention {
    0%, 100% {
        box-shadow: 0 0 0 transparent;
    }
    50% {
        box-shadow: 0 0 20px var(--button-glow-color, var(--color-primary));
        opacity: 0.9;
    }
}

@keyframes imprintFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(5);
        filter: blur(10px);
    }
    10% {
        opacity: 0.8;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
    }
}