header {
  --menu-padding-x: 3rem;
}

#hamburgerMenu {
  display: none;
  transform: translateX(100%);
  transition: transform 400ms ease-in-out, display 0.4s ease-out allow-discrete,
    overlay 0.4s ease-out allow-discrete;
  &:popover-open {
    display: flex;
    transform: translateX(0%);
    @starting-style {
      transform: translateX(100%);
    }
  }
  &::backdrop {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 300ms;
  }
  &:popover-open::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    @starting-style {
      background-color: rgba(0, 0, 0, 0);
    }
  }
}

#hamburgerMenu .body .content {
  transform: translateX(0%);
  transition: transform 300ms ease-out;
}

#hamburgerMenu .body .content:has([open]) {
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}

/* Didnt work as expected JS used to prevent details closing and set transforms */
.menuBlock details .detailBody {
  transform: translateX(100%);
  transition: transform 300ms ease-out, display 300ms ease-out allow-discrete;
}
.menuBlock details[open] .detailBody {
  transform: translateX(100%);
  @starting-style {
    transform: translateX(100%);
  }
}

.menuBlock details:not([open]) .detailBody {
  transition: transform 300ms ease-out, display 300ms ease-out allow-discrete;
}

header .social-links img {
  filter: brightness(0%) invert(100%);
}

header {
  position: sticky;
  top: 0;
  transition: transform 400ms ease-in-out, background-color 400ms ease;
  &.show {
    transform: translateY(0%);
  }
  &.hide {
    transform: translateY(-100%);
  }
}