/* ==========================================================================
   Cosamirai Navigation Opener Block Styles
   ========================================================================== */

   .cosamirai-navigation-opener {
    width: 4.5rem;
    height: 0.75rem;
    position: relative;
    margin: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cosamirai-navigation-opener:hover {
    opacity: 0.7;
}


/* Lines styling */
.opener-line {
    width: 100%;
    height: 2px;
    position: absolute;
    background: var(--c-oak-text);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center;
}

.opener-line-top {
    top: 0;
    left: 0;
}

.opener-line-bottom {
    top: calc(100% - 1px);
    left: 0;
}

.cosamirai-navigation-opener[aria-expanded="true"] {
    height: 5rem;
}

/* Animation vers croix (les traits se croisent vers le bas) */
.cosamirai-navigation-opener[aria-expanded="true"] .opener-line-top {
    top: 80%;
    transform: rotate(45deg);
}

.cosamirai-navigation-opener[aria-expanded="true"] .opener-line-bottom {
    top: 80%;
    transform: rotate(-45deg);
}


.cosamirai-navigation-opener.backend {
    max-width: 4rem;
}

/* Responsive */
@media (max-width: 768px) {
    .cosamirai-navigation-opener {
        width: 3.5rem;
    }

    .opener-line {
        height: 1.5px;
    }

    .cosamirai-navigation-opener[aria-expanded="true"] .opener-line-bottom,
    .cosamirai-navigation-opener[aria-expanded="true"] .opener-line-top{
        top: 50%;
    }
}