/**
 * EdGEL animated hamburger, based on BBC section navigation hamburger.
 */

@use "../settings" as *;
@use "../tools" as *;

.hamburger,
.hamburger::before,
.hamburger::after {
  position: absolute;
  top: edgel-px-rem(17);
  left: edgel-px-rem(11);
  width: edgel-px-rem(16);
  height: edgel-px-rem(4);
  background-color: var(--hamburger-colour, $black);
  @include transition(background $transition-duration, transform $transition-duration, top $transition-duration);
}

.hamburger::before,
.hamburger::after {
  left: 0;
  content: "";
}

.hamburger::before {
  top: edgel-px-rem(-6);
}

.hamburger::after {
  top: edgel-px-rem(6);
}

.open > .hamburger,
.hamburger-expanded {
  background-color: transparent;

  &::before {
    top: 0;
    transform: rotate3d(0, 0, 1, -45deg);
  }
  &::after {
    top: 0;
    transform: rotate3d(0, 0, 1, 45deg);
  }
}

.btn-hamburger {
  position: relative;
  min-width: edgel-px-rem(38);
  min-height: edgel-px-rem(38);
  padding-left: edgel-px-rem(38);
  vertical-align: edgel-px-rem(-4);
  background-color: transparent;
}
