@import './reset.css';
@import './parts/fontfaces.css';
@import './parts/keyframes.css';
@import './parts/custom-classes.css';
@import './parts/custom-blocks.css';
@import './parts/header.css';
@import './parts/menus.css';
@import './parts/footer.css';
@import './parts/forms.css';
@import './common-front-editor.css';

/* ================================
    BUTTON
   ================================ */
.wp-block-button__link{
    transition: all 0.1s ease-out;

    &::before,
    &::after{
        content: attr(data-text); /* Récupère le texte du bouton */
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: inherit;
        opacity: 0;
        z-index: 1;
        pointer-events: none;
        animation-timing-function: steps(1, end);
    }

    &::before{
        top:-3px;
        left:-3px;
        color: var(--wp--preset--color--primary);
        mix-blend-mode: color-burn;
    }

    &::after{
        bottom:-3px;
        right:-3px;
        color: var(--wp--preset--color--tertiary);
        mix-blend-mode: color-burn;
    }

    span{
        color:var(--color-black);
        position: color;
        z-index: 2;
    }

    &:hover{
        animation: glitch-translate-base 0.3s infinite alternate;
        box-shadow:
            -5px -5px 0px rgba(234,84,61,0.2), /* Magenta décalé */
            5px 5px 0px rgba(112,192,162,0.2),  /* Cyan décalé */
            -10px 10px 0px rgba(0,0,0,0.15);   /* Ombre noire principale décalée */
        &::before{
        opacity: 1;
        animation: glitch-translate-r 0.3s infinite alternate;
        }
        &::after{
        opacity: 1;
        animation: glitch-translate-g 0.3s infinite alternate;
        }
        span {
            opacity: 0.8;
            filter: blur(0.5px);
            animation: glitch-translate-base 0.3s infinite alternate;
        }
    }
}