/*
Module Name= Dynamic Hamburger
Updated= 25.02.24 */

/*
=Checkbox
============================================= */
.ins-wrapper input {
 display: none;
}

/*
=Hamburger Container
============================================= */
.hamburger {
 width: 2.6rem; height: 2.6rem;
  
 display: flex;
 justify-content: center;
 align-items: center;
 transform: translateX(0.4rem);

 position: relative;
 z-index: 5;
}

/*
=Rotate Wrapper
============================================= */
.hamburger .rotate-wrapper {
 width: 1.8rem; height: 1.8rem;

 display: flex;
 align-items: center;
 transition: 0.5s ease-in-out;
}

input:checked + .hamburger .rotate-wrapper {
 transform: rotate(135deg);
}

input:checked:hover + .hamburger .rotate-wrapper {
 transform: rotate(225deg);
}

/*
=Hamburger Label
============================================= */
.hamburger label {
 width: 2.6rem; height: 2.6rem;
 position: absolute;
 cursor: pointer;
}

/*
=Hamburger Lines
============================================= */
.hamburger .line,
.hamburger .line::before,
.hamburger .line::after {
 background-color: rgb(255 45 0);
 height: 0.15rem;
 width: 100%;
}

.hamburger .line {
 position: relative;
}

.hamburger .line::before,
.hamburger .line::after {
 content: "";
 position: absolute;
 transition: 0.35s ease-in-out;
}

.hamburger .line::before { top: -0.5rem; }
.hamburger .line::after  { top:  0.5rem; }

input:checked + .hamburger .line::before,
input:checked + .hamburger .line::after {
 transform: rotate(90deg);
 top: 0;
}

input:checked + .hamburger .line::after {
 opacity: 0;
}

/* ========================================== */