@media (min-width: 768px) {
  .header__mobile {
    display: none;
  }
}

.menu-toggle {
  position: relative;
  z-index: 100;
  width: var(--mobile-menu--toggle-size);
  height: var(--mobile-menu--toggle-size);
  padding: var(--mobile-menu--toggle-padding);
  border: var(--mobile-menu--toggle-border);
  border-radius: var(--mobile-menu--toggle-border-radius);
  background-color: var(--menu-toggle--background);
  color: var(--menu-toggle--icon);
  cursor: pointer;
  transition: var(--transition--all);
}

.menu-toggle:focus,
.menu-toggle:hover {
  background-color: var(--menu-toggle--background-hover, var(--menu-toggle--background));
  color: var(--menu-toggle--icon-hover);
}

.menu-toggle-icon {
  width: 100%;
  height: 100%;
}

.menu-toggle-icon path,
.menu-toggle-icon circle {
  transition: var(--transition--all);
}

.nav__mobile-menu-wrapper {
  position: absolute;
  top: calc(100% + var(--spacer--md));
  right: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  padding: var(--spacer--xl) var(--spacer--md);
  background-color: var(--mobile-menu--background);
}

.nav__mobile-menu-wrapper .nav__header a {
  color: var(--mobile-menu--link);
}

.nav__mobile-menu-wrapper .nav__header a:focus,
.nav__mobile-menu-wrapper .nav__header a:hover {
  color: var(--mobile-menu--link-hover);
}

.nav__mobile-menu-wrapper .nav__header .current_page_item a {
  color: var(--mobile-menu--accent);
}

.nav__mobile-menu-wrapper .menu-item-children {
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.nav__mobile-menu-wrapper .button__toggle svg {
  color: var(--mobile-menu--icon);
}

.nav__mobile-menu-wrapper .button__toggle:focus svg,
.nav__mobile-menu-wrapper .button__toggle:hover svg {
  color: var(--mobile-menu--icon-hover);
}

/* Social Media */
.header__mobile .nav__social svg {
  color: var(--mobile-menu--icon);
}

.header__mobile .nav__social svg:hover {
  color: var(--mobile-menu--icon-hover);
}