menu-button[data-side=down]>button>ul {
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(2px);
}

menu-button[data-side=down-left]>button>ul {
  right: 0;
  top: 100%;
  transform: translateY(2px);
}

menu-button[data-side=down-right]>button>ul {
  left: 0;
  top: 100%;
  transform: translateY(2px);
}

menu-button[data-side=up]>button>ul {
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(-2px);
}

menu-button[data-side=up-left]>button>ul {
  right: 0;
  bottom: 100%;
  transform: translateY(-2px);
}

menu-button[data-side=up-right]>button>ul {
  left: 0;
  bottom: 100%;
  transform: translateY(-2px);
}

menu-button[data-side=left]>button>ul {
  right: 100%;
  top: 50%;
  transform: translateX(-2px) translateY(-50%);
}

menu-button[data-side=left-up]>button>ul {
  right: 100%;
  bottom: 0;
  transform: translateX(-2px);
}

menu-button[data-side=left-down]>button>ul {
  right: 100%;
  top: 0;
  transform: translateX(-2px);
}

menu-button[data-side=right]>button>ul {
  left: 100%;
  top: 50%;
  transform: translateX(2px) translateY(-50%);
}

menu-button[data-side=right-up]>button>ul {
  left: 100%;
  bottom: 0;
  transform: translateX(2px);
}

menu-button[data-side=right-down]>button>ul {
  left: 100%;
  top: 0;
  transform: translateX(2px);
}

menu-button[data-side=center]>button>ul {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

menu-button[data-side=own-center]>button>ul {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}