/* variables */
:root {
    --root-font: 18px;
}

section.color--soft {
        background: url('/wp-content/themes/myle/img/bg-side.png') left 5rem top 0 repeat-y, url('/wp-content/themes/myle/img/bg-side.png') right 5rem top -6rem repeat-y;
        background-color: rgba(var(--light),100);
        background-size: 15rem;
}

@media (hover: hover) {

    nav a,
    .content a {
        position: relative;
        z-index:0;

        &::after {
            content:'';
            position: absolute;
            left:-0.2em;
            right:-0.2em;
            top:-0.1em;
            bottom:-0.1em;
            background-color: transparent;
            border-radius: 0.25em;
            transition: background-color 0.3s ease;
            z-index:-1;
        }

        &:hover, 
        &.current-menu-item {
            text-decoration: none;
            &::after {
                background-color: rgba(var(--white),100);
            }
        }

        /*
        .color--dark & {
            &:hover {
                background-color: var(--main-color);
            }
        } 

        .color--soft & {
            &:hover {
                background-color: var(--white);
            }
        }
        */ 
    }

    .btn {

        &:hover {
            background-color: color-mix(in srgb, rgb(var(--accent-color)), rgba(var(--dark),100) 20%);
        }

        &.btn--ghost:hover {
            background: transparent;
            color: color-mix(in srgb, rgb(var(--accent-color)), rgba(var(--dark),100) 20%);
            border-color: color-mix(in srgb, rgb(var(--accent-color)), rgba(var(--dark),100) 20%);
        }

    }




    a.boxes__box {
        transition: background-color 0.25s linear;
        &:hover {
            background-color: rgba(var(--fourth-color),100);
        }
    }

}