/* BTN STYLE */

.is-style-white-btn{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    border: 0;
    border-color: transparent;
    border-radius: 0;
    background: none;
    color: transparent;
    padding: 0;
    & a{
        background-color: var(--wp--preset--color--blanc);
        border-radius: 136px;
        display: flex;
        width: fit-content;
        position: relative;
        gap: 15px;
        border: solid 1.5px var(--wp--preset--color--blanc);
        & .btn-text{
            display: flex;
            color: var(--wp--preset--color--noir);
            padding: 15px;
            font-size: var(--wp--preset--font-size--xs-text);
            font-weight: 500;
            padding-right: 0;
            width: fit-content;
            flex-wrap: nowrap;
            position: relative;
            z-index: 1;
            transition: color ease-in-out .3s;
        }
        & .btn-bkg{
            background-color: var(--wp--preset--color--noir);
            height: 100%;
            border-radius: 136px;
            position: absolute;
            top: 0;
            right: 0;
            transition: all ease-in-out .3s;
            width: 0%;
        }
        & .btn-arrows{
            background-color: var(--wp--preset--color--noir);
            aspect-ratio: 1/1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 136px;
            overflow: hidden;
            position: relative;
        }
        & .btn-arrows::before, .btn-arrows::after{
            content: " ";
            background: url(../svg/up-arrow.svg) no-repeat;
            width: 15px;
            height: 16px;
            opacity: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all ease-in-out .3s;
        }
        & .btn-arrows::before{
            transform: translate(-50%, 25px);
            opacity: 0;
        }
    }
    & a:hover{
        cursor: pointer;
        & .btn-text{
            color: var(--wp--preset--color--blanc);
        }
        & .btn-bkg{
            aspect-ratio: unset;
            width: 100%;
        }
        & .btn-arrows::before{
            transform: translate(-50%, -50%);
            opacity: 1;
        }
        & .btn-arrows::after{
            transform: translate(-50%, -25px);
            opacity: 0;
        }
    }
}
button.is-style-white-btn{
    justify-content: flex-start;
    a {
        padding: 0;
        align-items: stretch;
        height: 50px;
        & .btn-arrows{
        }
    }
}

    
/* MEDIA QUERIES SAMPLES */
@media (max-width: 2560px) {
}
@media (max-width: 1920px) {
}
@media (max-width: 1600px) {
    body{
        --container-space : 10vw;
    }
}
@media (max-width: 1200px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
    body{
        --container-space : 1.33em;
    }
}
@media (max-width: 576px) {   
}