/* Style Variables */
$menu-icon-color: #763eff;

/* Navigation Toggle Button*/
.nav-toggle {
  @apply -mr-4;

  &:focus {
    outline: none;
  }
}

.nav-toggle-inner {
  @apply block;
  padding: 28px 20px;
  width: 18px;
  height: 2px;
  box-sizing: content-box;
  background-clip: content-box;
  transition: background-color 500ms ease-in-out 250ms;
  background-color: $menu-icon-color;

  &:hover {
    @apply cursor-pointer;
  }

  &::before,
  &::after {
    @apply relative block;
    content: '';
    width: 18px;
    height: 2px;
    background-color: $menu-icon-color;
    transition: transform 500ms ease-in-out;
  }

  &::before {
    top: -6px;
  }

  &::after {
    bottom: -4px;
  }
}

.nav-toggle__text {
  @apply hidden;
}

.nav-toggle.is-active .nav-toggle-inner {
  background-color: rgba(255, 255, 255, 0);
  transition-delay: 0s;
}

.nav-toggle.is-active .nav-toggle-inner::before {
  transform: translateY(6px) rotate(-225deg);
}

.nav-toggle.is-active .nav-toggle-inner::after {
  transform: translateY(-6px) rotate(225deg);
}