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

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

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

/*
=Hamburger Rotate Wrapper
============================================= */
.hamburger .rotate-wrapper {
 display: flex;
 align-items: center;
 width: 1.8rem; height: 1.8rem;
 transition: transform 500ms ease;
}

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

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

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

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

.hamburger .line {
 position: relative;
}

.hamburger .line::before,
.hamburger .line::after {
 content: "";
 position: absolute;
 transition: 
  transform 500ms ease,
  top 500ms ease,
  opacity 500ms ease;
}

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

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

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

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