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

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

$hamburger-bar-width: edgel-px-rem(16) !default;
$hamburger-bar-height: edgel-px-rem(1.5) !default;
$hamburger-bar-separation: edgel-px-rem(6) !default;
$hamburger-btn-min-size: edgel-px-rem(38) !default;

.hamburger,
.hamburger::before,
.hamburger::after {
  position: relative;
  width: $hamburger-bar-width;
  height: $hamburger-bar-height;
  background-color: currentcolor;
  @include transition(background $transition-duration, transform $transition-duration, top $transition-duration);
}

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

.hamburger::before {
  top: -$hamburger-bar-separation;
}

.hamburger::after {
  top: $hamburger-bar-separation;
}

.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 {
  @include edgel-hamburger-button();
  position: relative;
  display: flex;
  gap: var(--#{$prefix}btn-padding-x);
  align-items: center;
  min-width: $hamburger-btn-min-size;
  min-height: $hamburger-btn-min-size;
}