.toggle-modal-button {
  position: relative;
  width: 50px;
  height: 50px;
  display: block;
  background: var(--toggle-modal-background, var(--wp--preset--color--background));

  .bar {
    height: 3px;
    background: var(--toggle-modal-bar, var(--wp--preset--color--foreground));
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    transition: all 0.3s ease-in-out;
  }

  .bar2 {
    transform: translate(0%, -50%) rotate(0deg);
    top: 40%;
  }

  .bar3 {
    transform: translate(0%, -50%) rotate(0deg);
    top: 60%;
  }

  &.open,
  &[aria-expanded="true"] {

    .bar2 {
      transform: translate(0%, -50%) rotate(45deg);
      top: 50%;
    }

    .bar3 {
      transform: translate(0%, -50%) rotate(-45deg);
      top: 50%;
    }

  }

}

.uk-modal-dialog {
  background: var(--modal-background, var(--wp--preset--color--foreground));

  .toggle-modal-button {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .uk-nav, .uk-navbar-nav {

    a {
      color: var(--modal-link-color, var(--wp--preset--color--background));
    }

  }

}